/* ==============================================================================
   DESIGN TOKENS - zeshannasir.com
   Stockholm Dusk
   ============================================================================== */

:root {
  /* --- Dark palette: ink navy with one amber signal --- */
  color-scheme: dark;
  --bg-canvas: #070b14;
  --bg-surface: #0c1220;
  --bg-surface-raised: #121a2c;
  --bg-surface-glass: rgba(7, 11, 20, 0.82);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus: rgba(255, 180, 84, 0.55);
  --highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.09);
  --shadow-card: 0 12px 36px -6px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 20px 48px -8px rgba(0, 0, 0, 0.7);

  --gradient-headline: linear-gradient(180deg, #ffffff 30%, #b8c4d6 100%);
  --gradient-accent: linear-gradient(100deg, #ffc15e 0%, #ff7a59 100%);
  --grid-line: rgba(255, 255, 255, 0.045);
  --glow-a: rgba(255, 150, 70, 0.20);
  --glow-b: rgba(70, 110, 230, 0.26);

  --text-primary: #f8fafc;
  --text-secondary: #a3b1c6;
  --text-muted: #8494ab;
  --text-inverse: #070b14;

  --accent: #ffb454;
  --accent-subtle: rgba(255, 180, 84, 0.12);
  --accent-emerald: #10b981;
  --accent-emerald-subtle: rgba(16, 185, 129, 0.12);

  /* --- Spacing --- */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.75rem;

  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;

  --text-display: clamp(2.5rem, 5vw + 0.2rem, 4.1rem);
  --text-h2: clamp(1.4rem, 2vw + 0.3rem, 2rem);
  --text-h3: clamp(1.15rem, 1.2vw + 0.3rem, 1.35rem);
  --text-xs: 0.75rem;

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.05em;

  /* --- Structural --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-press: 100ms cubic-bezier(0.2, 0, 0, 1);
  --spring-float: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);

  --container-max: 980px;
  --container-pad: clamp(1.5rem, 5vw, 3rem);
}

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

  --bg-canvas: #f5f7fb;
  --bg-surface: #ffffff;
  --bg-surface-raised: #f1f5f9;
  --bg-surface-glass: rgba(245, 247, 251, 0.88);

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-focus: rgba(179, 74, 8, 0.5);
  --highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 1);
  --shadow-card: 0 8px 30px -4px rgba(15, 23, 42, 0.07);
  --shadow-hover: 0 16px 36px -6px rgba(15, 23, 42, 0.12);

  --gradient-headline: linear-gradient(180deg, #0a0e17 30%, #334155 100%);
  --gradient-accent: linear-gradient(100deg, #c2570c 0%, #c4372b 100%);
  --grid-line: rgba(15, 23, 42, 0.05);
  --glow-a: rgba(255, 176, 96, 0.34);
  --glow-b: rgba(120, 150, 230, 0.22);

  --text-primary: #0a0e17;
  --text-secondary: #475569;
  --text-muted: #566579;
  --text-inverse: #ffffff;

  --accent: #b34a08;
  --accent-subtle: rgba(179, 74, 8, 0.08);
  --accent-emerald: #059669;
  --accent-emerald-subtle: rgba(5, 150, 105, 0.08);
}