:root {

    /* =========================
       Brand Colors
    ========================== */

    --tq-navy: #08256E;
    --tq-blue: #0B63F6;
    --tq-blue-dark: #0057D9;
    --tq-cyan: #12BDF5;

    /* =========================
       Backgrounds
    ========================== */

    --tq-bg-page: #F7F9FC;
    --tq-bg-soft: #F5F9FF;
    --tq-surface: #FFFFFF;

    /* =========================
       Typography Colors
    ========================== */

    --tq-text-primary: #0F172A;
    --tq-text-secondary: #334155;
    --tq-text-muted: #64748B;
    --tq-text-disabled: #94A3B8;

    /* =========================
       Borders
    ========================== */

    --tq-border: #E2E8F0;
    --tq-border-light: #EEF2F7;

    /* =========================
       Status Colors
    ========================== */

    --tq-success: #15803D;
    --tq-success-bg: #DCFCE7;

    --tq-warning: #B45309;
    --tq-warning-bg: #FEF3C7;

    --tq-danger: #DC2626;
    --tq-danger-bg: #FEE2E2;

    --tq-info: #0369A1;
    --tq-info-bg: #E0F2FE;

    /* =========================
       Border Radius
    ========================== */

    --tq-radius-sm: 6px;
    --tq-radius-md: 10px;
    --tq-radius-card: 12px;
    --tq-radius-lg: 16px;
    --tq-radius-xl: 20px;
    --tq-radius-pill: 999px;

    /* =========================
       Spacing
    ========================== */

    --tq-space-1: 4px;
    --tq-space-2: 8px;
    --tq-space-3: 12px;
    --tq-space-4: 16px;
    --tq-space-5: 20px;
    --tq-space-6: 24px;
    --tq-space-8: 32px;
    --tq-space-10: 40px;
    --tq-space-12: 48px;
    --tq-space-16: 64px;
    --tq-space-20: 80px;
    --tq-space-24: 96px;

    /* =========================
       Shadows
    ========================== */

    --tq-shadow-card:
        0 1px 2px rgba(15, 23, 42, 0.05);

    --tq-shadow-elevated:
        0 8px 24px rgba(15, 23, 42, 0.08);

    --tq-shadow-modal:
        0 20px 50px rgba(15, 23, 42, 0.16);

    /* =========================
       Layout
    ========================== */

    --tq-container: 1280px;

    /* =========================
       Typography
    ========================== */

    --tq-font-en: "Inter", Arial, sans-serif;
    --tq-font-ar: "Noto Sans Arabic", Arial, sans-serif;

    /* =========================
       Brand Gradient
    ========================== */

    --tq-gradient:
        linear-gradient(
            135deg,
            #08256E 0%,
            #0057D9 50%,
            #12BDF5 100%
        );
}