/* DRMLess design tokens — single source of truth. Never hardcode colors elsewhere. */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/GeistVF.woff2") format("woff2-variations"),
       url("/static/fonts/GeistVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMonoVF.woff2") format("woff2-variations"),
       url("/static/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  --text-hero: clamp(2.5rem, 2rem + 2vw, 4rem);
  --text-stat: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Z-index */
  --z-header: 40;
  --z-sticky: 30;
  --z-sheet: 50;
  --z-dialog: 60;
  --z-toast: 70;

  /* Layout */
  --container: 1120px;
  --pad-x: 16px;
  --header-h: 3.5rem;
}

@media (min-width: 640px) {
  :root { --pad-x: 24px; }
}
@media (min-width: 1024px) {
  :root { --pad-x: 32px; }
}

/* Dark (default when data-theme=dark or system prefers dark) */
html[data-theme="dark"],
html:not([data-theme="light"]):not([data-theme="dark"]) {
  color-scheme: dark;
  --bg: #070A14;
  --surface: #0E1322;
  --surface-raised: #141A2E;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #E8ECF4;
  --text-secondary: #A3ADC4;
  --text-muted: #7C879F;
  --accent: #4ADE9A;
  --accent-soft: rgba(74, 222, 154, 0.12);
  --gog: #A78BFA;
  --itch: #FF7A7A;
  --official: #60A5FA;
  --no-alt: #64748B;
  --pending: #EAB308;
  --warning: #FBBF24;
  --danger: #F87171;
  --focus-ring: #4ADE9A;
  --hero-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74, 222, 154, 0.08), transparent 60%);
  --theme-color: #070A14;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F6F7FB;
    --surface: #FFFFFF;
    --surface-raised: #F0F2F8;
    --border: rgba(10, 15, 30, 0.10);
    --border-strong: rgba(10, 15, 30, 0.20);
    --text: #0B1020;
    --text-secondary: #4A5470;
    --text-muted: #6B7490;
    --accent: #0A7F55;
    --accent-soft: rgba(10, 127, 85, 0.10);
    --gog: #6D28D9;
    --itch: #C8323A;
    --official: #1D4ED8;
    --no-alt: #6B7490;
    --pending: #CA8A04;
    --warning: #B45309;
    --danger: #B91C1C;
    --focus-ring: #0A7F55;
    --hero-glow: none;
    --theme-color: #F6F7FB;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-raised: #F0F2F8;
  --border: rgba(10, 15, 30, 0.10);
  --border-strong: rgba(10, 15, 30, 0.20);
  --text: #0B1020;
  --text-secondary: #4A5470;
  --text-muted: #6B7490;
  --accent: #0A7F55;
  --accent-soft: rgba(10, 127, 85, 0.10);
  --gog: #6D28D9;
  --itch: #C8323A;
  --official: #1D4ED8;
  --no-alt: #6B7490;
  --pending: #CA8A04;
  --warning: #B45309;
  --danger: #B91C1C;
  --focus-ring: #0A7F55;
  --hero-glow: none;
  --theme-color: #F6F7FB;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}