/* CoakCoak design tokens — see websites/DESIGN.md.
   Layer 1: primitives (raw brand values, sampled from the app icon + app UI).
   Layer 2: semantic tokens (light default, dark via prefers-color-scheme or [data-theme="dark"]).
   Components only ever use the semantic layer. */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Arabic script + Persian digits only; Latin falls back to the system UI font. */
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF, U+066B-066C;
}

:root {
  /* ---- Primitives ---- */
  --royal-400: #4D74FF;
  --royal-500: #2F5BEA;
  --royal-600: #012DCA;   /* icon background */
  --royal-700: #0124A3;
  --royal-900: #0A1A6B;
  --sky-400: #38B6FF;
  --sky-500: #019CFD;     /* icon left bubble */
  --coral-400: #FF7A8E;
  --coral-500: #F2404B;   /* icon right bubble */
  --rose-500: #FF4B6C;    /* app active chip */
  --rose-600: #E11D48;
  --rose-700: #C81E3A;
  --navy-950: #0A0F1E;
  --navy-900: #0D1827;    /* app bottom-nav pill */
  --navy-800: #121A2E;
  --navy-700: #18213A;
  --navy-600: #232C47;
  --navy-500: #2E3A5C;
  --purple-300: #C4B5FD;
  --purple-500: #8D32FB;  /* app game card */
  --purple-600: #7C3AED;
  --purple-700: #6D28D9;
  --purple-50: #F7EEFF;
  --blush-50: #FFF8F9;    /* app background */
  --ink-900: #0D1827;
  --ink-600: #4A5468;
  --ink-500: #6B7385;
  --line-200: #ECE6EA;
  --line-300: #DCD4DA;
  --mist-100: #F4F6FB;
  --mist-200: #E8EDFF;
  --green-500: #16A34A;
  --white: #FFFFFF;

  /* ---- Scales ---- */
  --font-sans: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-3xl: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
  --lh-tight: 1.25;
  --lh-body: 1.75;

  --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: 4.5rem;
  --space-9: 6rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --container: 1180px;
  --gutter: 16px;
  --nav-h: 72px;
  --nav-h-compact: 58px;
  --touch: 44px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 250ms;

  /* ---- Semantic: light ---- */
  color-scheme: light;
  --bg: var(--blush-50);
  --bg-alt: var(--white);
  --surface: var(--white);
  --surface-2: var(--mist-100);
  --surface-glass: rgba(255, 248, 249, 0.78);
  --border: var(--line-200);
  --border-strong: var(--line-300);
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-500);
  --primary: var(--royal-600);
  --primary-hover: var(--royal-700);
  --on-primary: var(--white);
  --primary-soft: var(--mist-200);
  --primary-text: var(--royal-600);
  --accent: var(--rose-600);
  --on-accent: var(--white);
  --accent-text: var(--rose-700);
  --accent-soft: #FFE8EC;
  --game: var(--purple-500);
  --game-strong: var(--purple-700);
  --game-soft: var(--purple-50);
  --pill-dark: var(--navy-900);
  --on-pill-dark: var(--white);
  --sky: var(--sky-500);
  --coral: var(--coral-500);
  --online: var(--green-500);
  --verified: var(--sky-500);
  --focus: var(--royal-600);
  --skeleton: #EEE8EC;
  --skeleton-shine: #F8F4F6;
  --hero-glow-1: rgba(1, 156, 253, 0.22);
  --hero-glow-2: rgba(242, 64, 75, 0.18);
  --brand-gradient: linear-gradient(135deg, var(--royal-600) 0%, var(--royal-900) 100%);
  --brand-gradient-vivid: linear-gradient(120deg, var(--sky-500) 0%, var(--royal-600) 45%, var(--coral-500) 100%);
  --shadow-sm: 0 1px 2px rgba(13, 24, 39, 0.06), 0 1px 1px rgba(13, 24, 39, 0.04);
  --shadow-md: 0 8px 24px rgba(13, 24, 39, 0.08), 0 2px 6px rgba(13, 24, 39, 0.05);
  --shadow-lg: 0 24px 60px rgba(13, 24, 39, 0.14), 0 6px 18px rgba(13, 24, 39, 0.08);
  --primary-glow: rgba(1, 45, 202, 0.6);
  --online-soft: rgba(22, 163, 74, 0.16);
  --sky-soft: rgba(1, 156, 253, 0.14);
  --media-bg: #000000;
  --media-chip: rgba(13, 24, 39, 0.6);
  --media-overlay: rgba(13, 24, 39, 0.45);
  --grabber: rgba(255, 255, 255, 0.75);
  --on-brand-muted: rgba(255, 255, 255, 0.82);
  --on-brand-border: rgba(255, 255, 255, 0.35);
  --on-brand-fill: rgba(255, 255, 255, 0.12);
  --cta-glow-sky: rgba(1, 156, 253, 0.55);
  --cta-glow-coral: rgba(242, 64, 75, 0.45);
  --scrim: rgba(10, 15, 30, 0.6);
}

/* ---- Semantic: dark (system preference unless the user forced light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--navy-950);
    --bg-alt: #0E1426;
    --surface: var(--navy-800);
    --surface-2: var(--navy-700);
    --surface-glass: rgba(10, 15, 30, 0.74);
    --border: var(--navy-600);
    --border-strong: var(--navy-500);
    --text: #EEF2FF;
    --text-muted: #A9B3CF;
    --text-subtle: #8A94B3;
    --primary: var(--royal-500);
    --primary-hover: var(--royal-400);
    --on-primary: var(--white);
    --primary-soft: rgba(77, 116, 255, 0.16);
    --primary-text: #8FA9FF;
    --accent: var(--rose-600);
    --accent-text: var(--coral-400);
    --accent-soft: rgba(255, 75, 108, 0.16);
    --game-strong: var(--purple-300);
    --game-soft: rgba(141, 50, 251, 0.16);
    --pill-dark: #1E2A4A;
    --focus: #7EA2FF;
    --skeleton: #1A2340;
    --skeleton-shine: #222D50;
    --hero-glow-1: rgba(1, 156, 253, 0.18);
    --hero-glow-2: rgba(242, 64, 75, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
    --primary-glow: rgba(47, 91, 234, 0.5);
    --scrim: rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--navy-950);
  --bg-alt: #0E1426;
  --surface: var(--navy-800);
  --surface-2: var(--navy-700);
  --surface-glass: rgba(10, 15, 30, 0.74);
  --border: var(--navy-600);
  --border-strong: var(--navy-500);
  --text: #EEF2FF;
  --text-muted: #A9B3CF;
  --text-subtle: #8A94B3;
  --primary: var(--royal-500);
  --primary-hover: var(--royal-400);
  --on-primary: var(--white);
  --primary-soft: rgba(77, 116, 255, 0.16);
  --primary-text: #8FA9FF;
  --accent: var(--rose-600);
  --accent-text: var(--coral-400);
  --accent-soft: rgba(255, 75, 108, 0.16);
  --game-strong: var(--purple-300);
  --game-soft: rgba(141, 50, 251, 0.16);
  --pill-dark: #1E2A4A;
  --focus: #7EA2FF;
  --skeleton: #1A2340;
  --skeleton-shine: #222D50;
  --hero-glow-1: rgba(1, 156, 253, 0.18);
  --hero-glow-2: rgba(242, 64, 75, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --primary-glow: rgba(47, 91, 234, 0.5);
  --scrim: rgba(0, 0, 0, 0.7);
}