/* ==========================================================================
   Design tokens: the single source of truth for fonts, sizes, spacing,
   colors and motion. Night (cyberpunk Istanbul) is the base; [data-theme="day"]
   swaps colors for dawn over Istanbul. js/boot.js sets data-theme before paint.
   Contrast: every text color below passes WCAG AA (4.5:1) on its sky colors.
   ========================================================================== */

:root {
  /* ---- Fonts (Google Fonts, OFL, all include Turkish glyphs) ---- */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Saira width axis: condensed for headings, expanded for buttons and labels */
  --stretch-condensed: 78%;
  --stretch-expanded: 118%;

  /* ---- Fluid type scale ---- */
  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.8rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
  --step-5: clamp(3rem, 2.2rem + 4vw, 5.6rem);
  --step-6: clamp(3.6rem, 2.4rem + 6vw, 7.8rem);

  --leading-tight: 0.92;
  --leading-body: 1.6;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --gutter: clamp(16px, 4vw, 48px);
  --container-max: 78rem;

  /* ---- Shape ---- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --hairline: 1px;
  --border-w: 2px;
  /* Hard offset shadow: ONLY for primary CTAs and game cards */
  --offset: 5px;

  /* ---- Motion ---- */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --header-h: 104px; /* updated live by js/main.js */
  --z-header: 100;
  --z-toast: 200;

  /* ---- Night colors (default): cyberpunk Istanbul ---- */
  color-scheme: dark;
  --sky-top: #05051a;
  --sky-mid: #0d0a2e;
  --sky-horizon: #2a1250;
  --sky-glow: rgb(255 62 165 / 0.22);
  --bg: #07071c;
  --bg-deep: #04040f;

  --ink: #f3f0ff;
  --ink-muted: #aea9da;
  --hair: rgb(243 240 255 / 0.12);

  --neon-pink: #ff3ea5;
  --neon-purple: #a780ff;
  --cyber-blue: #2de2ff;
  --fire: #ff8a33;
  --fire-text: #ff8a33;
  --fire-hot: #ffe2c2;

  --accent: var(--fire);
  --accent-ink: #12061f;
  --link: var(--cyber-blue);
  --focus: var(--cyber-blue);

  --glass: rgb(18 14 52 / 0.55);
  --glass-strong: rgb(7 7 28 / 0.72);
  --glass-border: rgb(167 128 255 / 0.28);

  --cta-shadow: var(--neon-pink);
  --card-shadow: var(--neon-purple);

  --glow-text: 0 0 18px rgb(255 62 165 / 0.55);
  --glow-pink: 0 0 10px rgb(255 62 165 / 0.8);
  --glow-blue: 0 0 10px rgb(45 226 255 / 0.75);

  /* Brand petrol: logo and a few accents only (no body text). 6.79:1 or more
     on the night skies, ground and glass. */
  --brand: #3fb8c0;
  --brand-glow-text: 0 0 10px rgb(63 184 192 / 0.7);
  --brand-glow: drop-shadow(0 0 6px rgb(63 184 192 / 0.55));

  /* Line art (skyline, ships, trails) */
  --art-line: rgb(190 172 255 / 0.62);
  --art-bright: var(--cyber-blue);
  --art-beam: var(--cyber-blue);
  --art-station: var(--neon-pink);
  --art-smoke: rgb(255 226 194 / 0.5);
  --art-glow: drop-shadow(0 0 4px rgb(45 226 255 / 0.45));
  --stars-opacity: 1;
}

/* ---- Day colors: dawn sky over Istanbul (lavender + peach) ---- */
:root[data-theme="day"] {
  color-scheme: light;
  --sky-top: #ddd5ff;
  --sky-mid: #efe6ff;
  --sky-horizon: #ffdcc8;
  --sky-glow: rgb(255 154 92 / 0.35);
  --bg: #efe6ff;
  --bg-deep: #e6dcff;

  --ink: #1c1442;
  --ink-muted: #4a4270;
  --hair: rgb(28 20 66 / 0.14);

  --neon-pink: #b0105f;
  --neon-purple: #5a2fc2;
  --cyber-blue: #0a5f8f;
  --fire: #ff7a1a;
  --fire-text: #9c3806;
  --fire-hot: #ffffff;

  --accent: var(--fire);
  --accent-ink: #1c1442;
  --link: #0a5f8f;
  --focus: #5a2fc2;

  --glass: rgb(255 255 255 / 0.5);
  --glass-strong: rgb(239 230 255 / 0.78);
  --glass-border: rgb(90 47 194 / 0.22);

  --cta-shadow: var(--neon-purple);
  --card-shadow: var(--neon-pink);

  --glow-text: none;
  --glow-pink: none;
  --glow-blue: none;

  /* Deep petrol: the night petrol is too light for the dawn skies. 4.24:1 or
     more on the day skies and glass, 3.93:1 on the hero ground. No glow. */
  --brand: #1d6e76;
  --brand-glow-text: none;
  --brand-glow: none;

  --art-line: rgb(74 50 160 / 0.5);
  --art-bright: #5a2fc2;
  --art-beam: #ff9a5c;
  --art-station: #ff7a1a;
  --art-smoke: rgb(255 255 255 / 0.85);
  --art-glow: none;
  --stars-opacity: 0;
}

/* ---- Reduced motion: every duration collapses to instant ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}