/* ==========================================================================
   MODS4 — DESIGN TOKENS
   The single source of truth for the entire visual system.
   Theme-independent primitives live in :root.
   Semantic, theme-aware tokens are remapped per [data-theme].
   ========================================================================== */

:root {
  /* ----- Brand / accent (constant across themes) ----- */
  --brand-300: #6db6ff;
  --brand-400: #409fff;
  --brand-500: #0080ff;
  --brand-600: #0067d6;
  --brand-700: #0052ad;
  --brand-rgb: 6, 147, 227;          /* used for colored glass shadows */

  --success-400: #2bd672;
  --success-500: #16b84e;
  --danger-400:  #ff7088;
  --danger-500:  #ff4365;
  --warning-400: #ffc24b;
  --warning-500: #f5a623;

  /* ----- Typography ----- */
  --font-sans: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* Type scale — strict per spec: meta 14 / body 16 / title 18–20 */
  --fs-meta:   14px;   /* labels, badges, meta info        */
  --fs-body:   16px;   /* standard reading text            */
  --fs-title:  20px;   /* section + card titles, 700       */
  --fs-h2:     19px;
  --fs-h3:     18px;
  --fs-display: clamp(1.6rem, 1.2rem + 1.8vw, 2rem); /* hero H1 */
  --fs-xs:     12px;   /* fine print                       */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.6;

  --tracking: 0.01em;

  /* ----- Spacing scale (4px base) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ----- Radius ----- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ----- Motion ----- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.18s;
  --dur:       0.3s;
  --dur-slow:  0.5s;

  /* ----- Glass blur scale ----- */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;

  /* ----- Layout ----- */
  --sidebar-w: 240px;
  --container-max: 1320px;
  --header-h: 84px;

  /* ----- Z-index ladder ----- */
  --z-sticky:  100;
  --z-drawer:  200;
  --z-dropdown:300;
  --z-modal:   400;
  --z-toast:   500;
}

/* ==========================================================================
   DARK THEME — deep saturated slate / blue (default)
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0d111c;   /* deep blue-slate, never pure black */
  --bg-elev:       #121828;
  --bg-pattern:    radial-gradient(1200px 600px at 100% -10%, rgba(6,147,227,0.10), transparent 60%),
                   radial-gradient(900px 500px at -10% 110%, rgba(64,159,255,0.06), transparent 55%);

  --surface-1:     #151b2b;             /* solid card                    */
  --surface-2:     #1b2236;             /* raised / hover                */
  --surface-3:     #232c44;             /* highest solid                 */
  --surface-sunken:#0a0e17;

  --glass-bg:      rgba(21, 27, 43, 0.62);
  --glass-bg-strong: rgba(21, 27, 43, 0.82);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-sheen:   linear-gradient(157deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-strong:   #f3f6ff;
  --text:          #c4ccdc;
  --text-muted:    #8893a8;
  --text-faint:    #5b6478;

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-400);
  --accent-contrast:#ffffff;
  --accent-soft:   rgba(6, 147, 227, 0.14);

  /* Soft, multi-layered, colored drop-shadows → floating effect */
  --shadow-card:   0 2px 6px rgba(0,0,0,0.30);
  --shadow-float:  0 10px 30px rgba(var(--brand-rgb),0.18), 0 6px 16px rgba(0,0,0,0.45);
  --shadow-brand:  0 10px 25px rgba(var(--brand-rgb),0.28);
  --shadow-pop:    0 16px 48px rgba(0,0,0,0.55);

  --ring: 0 0 0 3px rgba(64,159,255,0.45);
}

/* ==========================================================================
   LIGHT THEME — soft cool off-white, high contrast
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #eef1f7;   /* soft off-white, never pure #fff */
  --bg-elev:       #f6f8fc;
  --bg-pattern:    radial-gradient(1200px 600px at 100% -10%, rgba(6,147,227,0.10), transparent 60%),
                   radial-gradient(900px 500px at -10% 110%, rgba(64,159,255,0.08), transparent 55%);

  --surface-1:     #fbfcfe;
  --surface-2:     #ffffff;
  --surface-3:     #ffffff;
  --surface-sunken:#e6eaf2;

  --glass-bg:      rgba(255, 255, 255, 0.60);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-border:  rgba(255, 255, 255, 0.70);
  --glass-sheen:   linear-gradient(157deg, rgba(255,255,255,0.65), rgba(255,255,255,0.15));

  --border:        rgba(15, 23, 42, 0.09);
  --border-strong: rgba(15, 23, 42, 0.16);

  --text-strong:   #0d1322;
  --text:          #41495b;
  --text-muted:    #66718a;
  --text-faint:    #97a0b4;

  --accent:        var(--brand-600);
  --accent-hover:  var(--brand-500);
  --accent-contrast:#ffffff;
  --accent-soft:   rgba(6, 147, 227, 0.10);

  --shadow-card:   0 2px 8px rgba(15,23,42,0.06);
  --shadow-float:  0 12px 28px rgba(var(--brand-rgb),0.12), 0 6px 14px rgba(15,23,42,0.08);
  --shadow-brand:  0 10px 25px rgba(var(--brand-rgb),0.18);
  --shadow-pop:    0 18px 48px rgba(15,23,42,0.18);

  --ring: 0 0 0 3px rgba(0,128,255,0.30);
}