/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM DESIGN TOKENS — Modern × Fast × Elegant

   Strategy:
   1. Static light-mode defaults in :root (works everywhere).
   2. @supports (light-dark()) → use light-dark() + color-scheme for
      zero-duplication auto-switching (Chrome 123+, FF 120+, Safari 17.5+).
   3. @supports not → explicit @media + [data-theme] overrides for older
      browsers (fallback, minimal set of critical vars).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   LAYER 0 — Static primitives (never change between themes)
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --primary-200: #A8C5FF;
  --primary-300: #7AA8FF;
  --primary-400: #588FFF;
  --primary-500: #3D5AFE;
  --primary-600: #2541CB;
  --primary-700: #1B2DA8;
  --primary-800: #141F80;
  --primary-900: #0D1657;

  --success-500: #00A37A;
  --success-600: #008F67;
  --warning-500: #D68A00;
  --error-500:   #E5383B;
  --error-600:   #C82E30;

  /* ── Spacing ── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 28px; --space-8: 32px;
  --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px;
  --space-16: 64px; --space-20: 80px;

  /* ── Typography ── */
  --text-xs: .75rem;  --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --leading-tight: 1.2; --leading-normal: 1.5;
  --leading-relaxed: 1.65; --leading-loose: 1.8;
  --weight-light: 300; --weight-normal: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800;
  --weight-black: 900;

  /* ── Border radius ── */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 18px; --radius-2xl: 24px; --radius-full: 9999px;

  /* ── Transitions ── */
  --duration-fast: 150ms; --duration-normal: 200ms;
  --duration-slow: 300ms; --duration-slower: 400ms;
  --easing-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-all:  all var(--duration-normal) var(--easing-in-out);
  --transition-fast: all var(--duration-fast)   var(--easing-in-out);
  --transition-slow: all var(--duration-slow)   var(--easing-in-out);

  /* ── Component sizing ── */
  --button-height-sm: 32px; --button-height-md: 40px; --button-height-lg: 48px;
  --input-height: 40px;
  --card-radius:  var(--radius-lg);
  --card-shadow:  var(--shadow-sm);
  --card-padding: var(--space-6);

  /* ── Static color aliases ── */
  --blue:      #3D5AFE;
  --blue-d:    #2541CB;
  --blue-text: #2541CB;
  --green:     #00A37A;
  --red:       #E5383B;
  --amber:     #C07D00;
  --purple:    #6D35E0;
  --primary:   var(--blue);
  --gold:      var(--amber);

  --shadow-primary:    0 8px  24px rgba(61,90,254,.28);
  --shadow-primary-lg: 0 16px 40px rgba(61,90,254,.35);
  --sh-blue:           0 6px  28px rgba(61,90,254,.26);
  --sh-blue-lg:        0 12px 48px rgba(61,90,254,.32);

  --font:         'IBM Plex Sans Arabic', 'Tajawal', -apple-system, sans-serif;
  --font-display: 'Tajawal', -apple-system, sans-serif;
  --mono:         'SF Mono', 'Fira Code', 'Courier New', monospace;
  --fs: 15.75px; --fs-sm: 13.5px; --fs-xs: 12px;
  --sp1: 8px; --sp2: 20px; --sp3: 32px; --sp4: 48px; --sp5: 64px;
  --r: 8px; --r2: 14px; --r3: 20px; --r4: 28px; --r5: 40px;
  --t:        all .20s cubic-bezier(.4,0,.2,1);
  --t-s:      all .13s cubic-bezier(.4,0,.2,1);
  --t-l:      all .32s cubic-bezier(.4,0,.2,1);
  --t-spring: all .40s cubic-bezier(.34,1.56,.64,1);

  /* ── Glass morphism ── */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(28px);
  --glass-light: rgba(255,255,255,.72);
  --glass-dark:  rgba(14,14,20,.72);
  --glass-border-light: rgba(255,255,255,.22);
  --glass-border-dark:  rgba(255,255,255,.10);

  /* ── Refined easing curves ── */
  --ease-bounce:   cubic-bezier(.34,1.56,.64,1);
  --ease-snappy:   cubic-bezier(.25,.46,.45,.94);
  --ease-smooth:   cubic-bezier(.42,0,.58,1);
  --ease-sharp-in: cubic-bezier(.4,0,1,1);
  --ease-sharp-out:cubic-bezier(0,0,.2,1);

  /* ── Elevation system ── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --elevation-2: 0 2px 8px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
  --elevation-3: 0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --elevation-4: 0 16px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08);
}

/* ──────────────────────────────────────────────────────────────────────────
   LAYER 1 — LIGHT MODE DEFAULTS (works on every browser)
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --primary-50:  #EDF0FF;
  --primary-100: #D0DCFF;

  --neutral-50:  #FAFAF8; --neutral-100: #F5F4F1; --neutral-150: #F0EEEA;
  --neutral-200: #E8E7E2; --neutral-300: #D4D2CE; --neutral-400: #B9B6B0;
  --neutral-500: #8F8C86; --neutral-600: #6B6864; --neutral-700: #494643;
  --neutral-800: #2E2C2A; --neutral-900: #1A1918; --neutral-950: #0F0E0D;

  --ink:    #0D0D14;
  --ink-2:  #3A3A50;
  --ink-3:  #888898;
  --ink-4:  #BCBCCC;
  --bg:     #F7F6F2;
  --bg-2:   #EFEEE9;
  --bg-3:   #E5E4DE;
  --card:   #FFFFFF;
  --card2:  #FAFAF8;
  --card3:  #F3F2EE;

  --border:   rgba(13,13,20,.07);
  --border-d: rgba(13,13,20,.13);
  --border-f: rgba(13,13,20,.22);

  --blue-l:    #EDF0FF;
  --blue-m:    rgba(61,90,254,.10);
  --blue-glow: rgba(61,90,254,.22);
  --green-l:   rgba(0,163,122,.09);
  --red-l:     rgba(229,56,59,.09);
  --amber-l:   rgba(192,125,0,.10);
  --purple-l:  rgba(109,53,224,.10);
  --primary-xs: var(--blue-l);

  --shadow-xs: 0 1px 2px  rgba(15,14,13,.05);
  --shadow-sm: 0 1px 3px  rgba(15,14,13,.10), 0 1px 2px rgba(15,14,13,.06);
  --shadow-md: 0 4px 12px rgba(15,14,13,.08), 0 2px 4px rgba(15,14,13,.05);
  --shadow-lg: 0 12px 32px rgba(15,14,13,.12), 0 4px 8px rgba(15,14,13,.08);
  --shadow-xl: 0 20px 48px rgba(15,14,13,.16), 0 8px 16px rgba(15,14,13,.10);

  --sh0: 0 1px 2px  rgba(13,13,20,.04);
  --sh1: 0 2px 8px  rgba(13,13,20,.055), 0 1px 2px rgba(13,13,20,.04);
  --sh2: 0 6px 20px rgba(13,13,20,.08),  0 2px 6px rgba(13,13,20,.04);
  --sh3: 0 16px 48px rgba(13,13,20,.11), 0 4px 12px rgba(13,13,20,.06);
  --sh4: 0 32px 80px rgba(13,13,20,.14), 0 8px 24px rgba(13,13,20,.08);

  --t1: var(--ink);
  --t2: var(--ink-2);

  --theme-chip-bg:            linear-gradient(165deg,#fffef8 0%,#f8ecd4 35%,#e9d39a 100%);
  --theme-chip-text:          #3a3020;
  --theme-chip-border:        rgba(145,105,35,.42);
  --theme-chip-system-bg:     linear-gradient(165deg,#f8f4ff 0%,#e8dff5 50%,#ddd0ec 100%);
  --theme-chip-system-border: rgba(61,90,254,.28);
}

/* ──────────────────────────────────────────────────────────────────────────
   LAYER 2A — MODERN: auto theming via light-dark() + color-scheme
   Browsers: Chrome 123+, Firefox 120+, Safari 17.5+
   ────────────────────────────────────────────────────────────────────────── */
@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;

    --primary-50:  light-dark(#EDF0FF, #141832);
    --primary-100: light-dark(#D0DCFF, #1B2250);

    --neutral-50:  light-dark(#FAFAF8, #121218); --neutral-100: light-dark(#F5F4F1, #16161E);
    --neutral-150: light-dark(#F0EEEA, #1A1A24); --neutral-200: light-dark(#E8E7E2, #22222C);
    --neutral-300: light-dark(#D4D2CE, #34343F); --neutral-400: light-dark(#B9B6B0, #5C5C6A);
    --neutral-500: light-dark(#8F8C86, #8A8A98); --neutral-600: light-dark(#6B6864, #A8A8B4);
    --neutral-700: light-dark(#494643, #C8C8D0); --neutral-800: light-dark(#2E2C2A, #E2E2E8);
    --neutral-900: light-dark(#1A1918, #F0F0F4); --neutral-950: light-dark(#0F0E0D, #FAFAFC);

    --ink:   light-dark(#0D0D14, #ECECF2);
    --ink-2: light-dark(#3A3A50, #B8B8C8);
    --ink-3: light-dark(#888898, #8E8E9E);
    --ink-4: light-dark(#BCBCCC, #6E6E7E);
    --bg:    light-dark(#F7F6F2, #0E0E14);
    --bg-2:  light-dark(#EFEEE9, #13131A);
    --bg-3:  light-dark(#E5E4DE, #1A1A22);
    --card:  light-dark(#FFFFFF,  #16161F);
    --card2: light-dark(#FAFAF8,  #1C1C26);
    --card3: light-dark(#F3F2EE,  #24242E);

    --border:   light-dark(rgba(13,13,20,.07),  rgba(255,255,255,.08));
    --border-d: light-dark(rgba(13,13,20,.13),  rgba(255,255,255,.12));
    --border-f: light-dark(rgba(13,13,20,.22),  rgba(255,255,255,.18));

    --blue-l:    light-dark(#EDF0FF,             rgba(61,90,254,.22));
    --blue-m:    light-dark(rgba(61,90,254,.10), rgba(61,90,254,.28));
    --blue-glow: light-dark(rgba(61,90,254,.22), rgba(61,90,254,.40));
    --green-l:   light-dark(rgba(0,163,122,.09),  rgba(0,163,122,.18));
    --red-l:     light-dark(rgba(229,56,59,.09),  rgba(229,56,59,.18));
    --amber-l:   light-dark(rgba(192,125,0,.10),  rgba(192,125,0,.20));
    --purple-l:  light-dark(rgba(109,53,224,.10), rgba(109,53,224,.22));
    --primary-xs: var(--blue-l);

    --shadow-xs: 0 1px 2px  light-dark(rgba(15,14,13,.05),  rgba(0,0,0,.35));
    --shadow-sm: 0 1px 3px  light-dark(rgba(15,14,13,.10),  rgba(0,0,0,.40)),
                 0 1px 2px  light-dark(rgba(15,14,13,.06),  rgba(0,0,0,.30));
    --shadow-md: 0 4px 12px light-dark(rgba(15,14,13,.08),  rgba(0,0,0,.45)),
                 0 2px 4px  light-dark(rgba(15,14,13,.05),  rgba(0,0,0,.35));
    --shadow-lg: 0 12px 32px light-dark(rgba(15,14,13,.12), rgba(0,0,0,.50)),
                 0 4px 8px   light-dark(rgba(15,14,13,.08), rgba(0,0,0,.40));
    --shadow-xl: 0 20px 48px light-dark(rgba(15,14,13,.16), rgba(0,0,0,.55)),
                 0 8px 16px  light-dark(rgba(15,14,13,.10), rgba(0,0,0,.45));

    --sh0: 0 1px 2px  light-dark(rgba(13,13,20,.04),  rgba(0,0,0,.35));
    --sh1: 0 2px 8px  light-dark(rgba(13,13,20,.055), rgba(0,0,0,.40)),
           0 1px 2px  light-dark(rgba(13,13,20,.04),  rgba(0,0,0,.30));
    --sh2: 0 6px 20px light-dark(rgba(13,13,20,.08),  rgba(0,0,0,.45)),
           0 2px 6px  light-dark(rgba(13,13,20,.04),  rgba(0,0,0,.35));
    --sh3: 0 16px 48px light-dark(rgba(13,13,20,.11), rgba(0,0,0,.50)),
           0 4px 12px  light-dark(rgba(13,13,20,.06), rgba(0,0,0,.40));
    --sh4: 0 32px 80px light-dark(rgba(13,13,20,.14), rgba(0,0,0,.55)),
           0 8px 24px  light-dark(rgba(13,13,20,.08), rgba(0,0,0,.45));

    --t1: var(--ink);
    --t2: var(--ink-2);

    --theme-chip-bg: linear-gradient(165deg,
      light-dark(#fffef8,#3a3328) 0%,
      light-dark(#f8ecd4,#322c22) 50%,
      light-dark(#e9d39a,#2e2820) 100%);
    --theme-chip-text:   light-dark(#3a3020, #f2e8d2);
    --theme-chip-border: light-dark(rgba(145,105,35,.42), rgba(220,185,110,.28));
    --theme-chip-system-bg: linear-gradient(165deg,
      light-dark(#f8f4ff,#2e3448) 0%,
      light-dark(#e8dff5,#262c3e) 50%,
      light-dark(#ddd0ec,#242a38) 100%);
    --theme-chip-system-border: light-dark(rgba(61,90,254,.28), rgba(120,145,255,.38));
  }

  /* Force modes via color-scheme */
  :root[data-theme="light"] { color-scheme: only light; }
  :root[data-theme="dark"]  { color-scheme: only dark;  }
}

/* ──────────────────────────────────────────────────────────────────────────
   LAYER 2B — LEGACY: explicit dark overrides for older browsers
   Only runs when light-dark() is NOT supported.
   ────────────────────────────────────────────────────────────────────────── */
@supports not (color: light-dark(white, black)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --primary-50: #141832; --primary-100: #1B2250;
      --neutral-50: #121218; --neutral-100: #16161E; --neutral-150: #1A1A24;
      --neutral-200: #22222C; --neutral-300: #34343F; --neutral-400: #5C5C6A;
      --neutral-500: #8A8A98; --neutral-600: #A8A8B4; --neutral-700: #C8C8D0;
      --neutral-800: #E2E2E8; --neutral-900: #F0F0F4; --neutral-950: #FAFAFC;
      --ink: #ECECF2; --ink-2: #B8B8C8; --ink-3: #8E8E9E; --ink-4: #6E6E7E;
      --bg: #0E0E14; --bg-2: #13131A; --bg-3: #1A1A22;
      --card: #16161F; --card2: #1C1C26; --card3: #24242E;
      --border: rgba(255,255,255,.08); --border-d: rgba(255,255,255,.12); --border-f: rgba(255,255,255,.18);
      --blue-l: rgba(61,90,254,.22); --blue-m: rgba(61,90,254,.28); --blue-glow: rgba(61,90,254,.40);
      --green-l: rgba(0,163,122,.18); --red-l: rgba(229,56,59,.18); --amber-l: rgba(192,125,0,.20); --purple-l: rgba(109,53,224,.22);
      --sh0: 0 1px 2px rgba(0,0,0,.35);
      --sh1: 0 2px 8px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
      --sh2: 0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
      --sh3: 0 16px 48px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.40);
      --sh4: 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.45);
      --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
      --shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
      --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
      --shadow-lg: 0 12px 32px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.40);
      --shadow-xl: 0 20px 48px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.45);
      --theme-chip-bg: linear-gradient(165deg,#3a3328 0%,#2e2820 100%);
      --theme-chip-text: #f2e8d2; --theme-chip-border: rgba(220,185,110,.28);
      --theme-chip-system-bg: linear-gradient(165deg,#2e3448 0%,#242a38 100%);
      --theme-chip-system-border: rgba(120,145,255,.38);
    }
  }

  :root[data-theme="dark"] {
    --primary-50: #141832; --primary-100: #1B2250;
    --neutral-50: #121218; --neutral-100: #16161E; --neutral-150: #1A1A24;
    --neutral-200: #22222C; --neutral-300: #34343F; --neutral-400: #5C5C6A;
    --neutral-500: #8A8A98; --neutral-600: #A8A8B4; --neutral-700: #C8C8D0;
    --neutral-800: #E2E2E8; --neutral-900: #F0F0F4; --neutral-950: #FAFAFC;
    --ink: #ECECF2; --ink-2: #B8B8C8; --ink-3: #8E8E9E; --ink-4: #6E6E7E;
    --bg: #0E0E14; --bg-2: #13131A; --bg-3: #1A1A22;
    --card: #16161F; --card2: #1C1C26; --card3: #24242E;
    --border: rgba(255,255,255,.08); --border-d: rgba(255,255,255,.12); --border-f: rgba(255,255,255,.18);
    --blue-l: rgba(61,90,254,.22); --blue-m: rgba(61,90,254,.28); --blue-glow: rgba(61,90,254,.40);
    --green-l: rgba(0,163,122,.18); --red-l: rgba(229,56,59,.18); --amber-l: rgba(192,125,0,.20); --purple-l: rgba(109,53,224,.22);
    --sh0: 0 1px 2px rgba(0,0,0,.35);
    --sh1: 0 2px 8px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
    --sh2: 0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    --sh3: 0 16px 48px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.40);
    --sh4: 0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.45);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.40);
    --shadow-xl: 0 20px 48px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.45);
    --theme-chip-bg: linear-gradient(165deg,#3a3328 0%,#2e2820 100%);
    --theme-chip-text: #f2e8d2; --theme-chip-border: rgba(220,185,110,.28);
    --theme-chip-system-bg: linear-gradient(165deg,#2e3448 0%,#242a38 100%);
    --theme-chip-system-border: rgba(120,145,255,.38);
  }
}