/*
|==========================================================================
| DESIGN TOKENS — THE SINGLE SOURCE OF TRUTH
|==========================================================================
|
| ⚠️  ALL visual values live HERE and ONLY here.
|     No other CSS file should define colors, fonts, spacing, or shadows.
|     Every other file references these via var(--token-name).
|
| 🎨  To customize for a new client:
|     1. Change values below
|     2. Everything updates automatically
|
| 🌙  Dark mode values are defined here too (under [data-theme="dark"])
| 🔄  RTL direction tokens are defined here too
|
*/

/* ========================================================================
   LIGHT THEME (Default)
   ======================================================================== */
:root {
    /* Native form controls, scrollbars, etc. render in light */
    color-scheme: light;

    /* ── Brand Colors: Al-Safa Heating & Cooling ─────────────────────── */
    --color-primary:          #0096C7; /* Cooling Cyan */
    --color-primary-hover:    #0077B6;
    --color-primary-light:    #E0F2FE;
    --color-primary-dark:     #0F4C81; /* Deep Marine Blue */

    --color-secondary:        #F77F00; /* Heating Flame Amber */
    --color-secondary-hover:  #E85D04;
    --color-secondary-light:  #FFEDD5;
    --color-secondary-dark:   #D90429; /* Deep Heating Crimson */

    --color-accent:           #00B4D8; /* Vibrant Sky Cool */
    --color-accent-hover:     #0096C7;
    --color-accent-light:     #E0F7FA;
    --color-flame:            #F77F00;
    --color-frost:            #00B4D8;

    /* ── Semantic Colors ────────────────────────────────────────────── */
    --color-success:          #10b981;
    --color-success-light:    #d1fae5;
    --color-warning:          #f59e0b;
    --color-warning-light:    #fef3c7;
    --color-error:            #ef4444;
    --color-error-light:      #fee2e2;
    --color-info:             #3b82f6;
    --color-info-light:       #dbeafe;

    /* ── Surface Colors ─────────────────────────────────────────────── */
    --color-bg:               #ffffff;
    --color-bg-alt:           #f8fafc;
    --color-surface:          #ffffff;
    --color-surface-hover:    #f1f5f9;
    --color-surface-raised:   #ffffff;

    /* ── Text Colors ────────────────────────────────────────────────── */
    --color-text:             #0f172a;
    --color-text-secondary:   #334155;
    --color-text-muted:       #64748b;
    --color-text-inverse:     #ffffff;
    --color-on-brand:         #ffffff;   /* text on primary/secondary/gradient backgrounds — same in both themes */
    --color-text-link:        var(--color-primary);
    --color-text-link-hover:  var(--color-primary-hover);
    --color-box-hover-bg:     #f1f5f9;
    --color-box-hover-text:   #0f172a;

    /* ── Border Colors ──────────────────────────────────────────────── */
    --color-border:           #cbd5e1;
    --color-border-strong:    #94a3b8;
    --color-border-focus:     var(--color-primary);

    /* ── Overlay ────────────────────────────────────────────────────── */
    --color-overlay:          rgba(0, 0, 0, 0.5);

    /* ── Typography ─────────────────────────────────────────────────── */
    --font-en:                'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ar:                'Cairo', 'Noto Sans Arabic', sans-serif;
    --font-mono:              'Fira Code', 'Courier New', monospace;

    --font-size-xs:           0.75rem;     /* 12px */
    --font-size-sm:           0.875rem;    /* 14px */
    --font-size-base:         1rem;        /* 16px */
    --font-size-lg:           1.125rem;    /* 18px */
    --font-size-xl:           1.25rem;     /* 20px */
    --font-size-2xl:          1.5rem;      /* 24px */
    --font-size-3xl:          1.875rem;    /* 30px */
    --font-size-4xl:          2.25rem;     /* 36px */
    --font-size-5xl:          3rem;        /* 48px */

    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;

    --line-height-tight:      1.25;
    --line-height-normal:     1.5;
    --line-height-relaxed:    1.75;

    /* ── Spacing Scale ──────────────────────────────────────────────── */
    --space-0:    0;
    --space-1:    0.25rem;     /* 4px */
    --space-2:    0.5rem;      /* 8px */
    --space-3:    0.75rem;     /* 12px */
    --space-4:    1rem;        /* 16px */
    --space-5:    1.25rem;     /* 20px */
    --space-6:    1.5rem;      /* 24px */
    --space-8:    2rem;        /* 32px */
    --space-10:   2.5rem;      /* 40px */
    --space-12:   3rem;        /* 48px */
    --space-16:   4rem;        /* 64px */
    --space-20:   5rem;        /* 80px */
    --space-24:   6rem;        /* 96px */

    /* ── Layout ─────────────────────────────────────────────────────── */
    --container-sm:    640px;
    --container-md:    768px;
    --container-lg:    1024px;
    --container-xl:    1280px;
    --container-2xl:   1440px;

    --header-height:   4rem;
    --footer-height:   auto;
    --sidebar-width:   280px;

    /* ── Border Radius ──────────────────────────────────────────────── */
    --radius-none:     0;
    --radius-sm:       0.25rem;    /* 4px */
    --radius-md:       0.5rem;     /* 8px */
    --radius-lg:       0.75rem;    /* 12px */
    --radius-xl:       1rem;       /* 16px */
    --radius-2xl:      1.5rem;     /* 24px */
    --radius-full:     9999px;

    /* ── Shadows ────────────────────────────────────────────────────── */
    --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:       0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:       0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-xl:       0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
    --shadow-inner:    inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ── Transitions ────────────────────────────────────────────────── */
    --transition-fast:     150ms ease;
    --transition-normal:   300ms ease;
    --transition-slow:     500ms ease;
    --transition-bounce:   500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index Scale ──────────────────────────────────────────────── */
    --z-dropdown:     10;
    --z-sticky:       20;
    --z-fixed:        30;
    --z-overlay:      40;
    --z-modal:        50;
    --z-toast:        60;
    --z-tooltip:      70;
}


/* ========================================================================
   DARK THEME — Premium Edition
   Same variable names — different values.
   Switching data-theme="dark" changes everything automatically.
   Engineered for maximum contrast, luminous brand colors, and premium depth.
   ======================================================================== */
[data-theme="dark"] {
    /* Native form controls, scrollbars, etc. render in dark */
    color-scheme: dark;

    /* ── Surface Colors — layered elevation (deep navy, not flat slate) ── */
    --color-bg:               #0b1120;
    --color-bg-alt:           #0f1729;
    --color-surface:          #141d33;
    --color-surface-hover:    #1e2d4a;
    --color-surface-raised:   #1a2540;
    --color-surface-glass:    rgba(20, 29, 51, 0.7);

    /* ── Text Colors — HIGH contrast, crisp on dark, never washed out ──── */
    --color-text:             #f1f5f9;
    --color-text-secondary:   #d1d9e6;
    --color-text-muted:       #8b9bc0;
    --color-text-inverse:     #0b1120;
    --color-on-brand:         #ffffff;
    --color-box-hover-bg:     #1e2d4a;
    --color-box-hover-text:   #f8fafc;

    /* ── Border Colors — visible but elegant on dark mode ──────────────── */
    --color-border:           rgba(226, 232, 240, 0.18);
    --color-border-strong:    rgba(226, 232, 240, 0.35);

    /* ── Brand Colors: Al-Safa Luminous Dark Mode ─────────────────────── */
    --color-primary:          #38BDF8; /* Glowing Ice Cyan */
    --color-primary-hover:    #7DD3FC;
    --color-primary-light:    rgba(56, 189, 248, 0.16);
    --color-primary-dark:     #0284C7;

    --color-secondary:        #FB923C; /* Glowing Flame Amber */
    --color-secondary-hover:  #FDBA74;
    --color-secondary-light:  rgba(251, 146, 60, 0.16);
    --color-secondary-dark:   #EF4444;

    --color-accent:           #38BDF8;
    --color-accent-hover:     #7DD3FC;
    --color-accent-light:     rgba(56, 189, 248, 0.15);
    --color-flame:            #FB923C;
    --color-frost:            #38BDF8;

    /* ── Semantic Colors — brightened for dark backgrounds ──────────── */
    --color-success:          #34d399;
    --color-success-light:    rgba(52, 211, 153, 0.15);
    --color-warning:          #fbbf24;
    --color-warning-light:    rgba(251, 191, 36, 0.15);
    --color-error:            #f87171;
    --color-error-light:      rgba(248, 113, 113, 0.15);
    --color-info:             #60a5fa;
    --color-info-light:       rgba(96, 165, 250, 0.15);

    /* ── Overlay ────────────────────────────────────────────────────── */
    --color-overlay:          rgba(3, 7, 18, 0.78);

    /* ── Shadows — deep ambient + faint brand glow on raised layers ── */
    --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm:       0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md:       0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.06);
    --shadow-lg:       0 14px 34px rgba(0, 0, 0, 0.5), 0 0 28px rgba(77, 141, 255, 0.08);
    --shadow-xl:       0 24px 48px rgba(0, 0, 0, 0.55), 0 0 44px rgba(77, 141, 255, 0.10);
    --shadow-inner:    inset 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-glow:     0 0 30px rgba(77, 141, 255, 0.12);
}


/* ========================================================================
   RTL / LTR Direction Tokens
   ======================================================================== */
[dir="rtl"] {
    --font-family:     var(--font-ar);
    --text-align:      right;
    --dir-start:       right;
    --dir-end:         left;
}

[dir="ltr"] {
    --font-family:     var(--font-en);
    --text-align:      left;
    --dir-start:       left;
    --dir-end:         right;
}