/* ---------- Design tokens ---------- */
/* Theme variables — defaults are dark. Light theme overrides via [data-theme="light"]. */

:root {
  /* Brand */
  --brand-yellow: #f4bb33;
  --brand-yellow-deep: #d39f2a;
  --brand-blue: #4f7cff;
  --brand-blue-deep: #2a4fb8;

  /* Type scale */
  --font-sans: "Sansation", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  /* Overridable by font picker — brand/logo (Sansation) and mono stay fixed */
  --font-heading: "Ubuntu", sans-serif;
  --font-body: "Ubuntu Sans", sans-serif;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Dark theme (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #08101f;
  --bg-elev: #0d1730;
  --bg-elev-2: #122042;
  --surface: #0f1a35;
  --surface-2: #15234a;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  --fg: #eaf0ff;
  --fg-muted: #aab4cf;
  --fg-soft: #7886a8;
  --fg-faint: #4a5374;

  --accent: var(--brand-yellow);
  --accent-deep: var(--brand-yellow-deep);
  --accent-soft: rgba(244, 187, 51, 0.14);
  --accent-ring: rgba(244, 187, 51, 0.32);

  --link: #8aa6ff;

  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lg: 0 24px 60px rgba(2, 8, 23, .55), 0 8px 24px rgba(2, 8, 23, .35);
  --shadow-glow: 0 0 0 1px var(--hairline-strong), 0 24px 80px rgba(244, 187, 51, .08);

  --grid-line: rgba(244, 187, 51, 0.06);
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg: #eaedf5;
  --bg-elev: #ffffff;
  --bg-elev-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f3fa;
  --hairline: rgba(15, 23, 42, 0.10);
  --hairline-strong: rgba(15, 23, 42, 0.18);

  --fg: #0a1226;
  --fg-muted: #475569;
  --fg-soft: #64748b;
  --fg-faint: #94a3b8;

  --accent: var(--brand-yellow-deep);
  --accent-deep: #b8861d;
  --accent-soft: rgba(211, 159, 42, 0.10);
  --accent-ring: rgba(211, 159, 42, 0.28);

  --link: #2a4fb8;

  --ok: #059669;
  --warn: #d97706;
  --err: #dc2626;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .14), 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-glow: 0 0 0 1px var(--hairline-strong), 0 24px 80px rgba(211, 159, 42, .12);

  --grid-line: rgba(15, 23, 42, 0.05);
}