/* ─────────────────────────────────────────────────────────────────────────
   FlashQuest design tokens v2 — colors, type, space, and the page ATMOSPHERE.
   Both themes are first-class. The atmospheres are the Table's GigaAtelier
   (tone "gallery"), ported verbatim: base ramp, six-blob rainbow mesh
   (purple/blue/pink/gold/teal/blue at the app's exact opacity stops), floor
   scrim, edge vignette, and the 1px accent top rim. Blob geometry maps the
   app's 393x852 canvas fractions to vw/vh centers + radii so the
   composition holds at any viewport. Light mode runs the mesh at the app's
   LIGHT_SCALE 0.7. Components consume tokens only.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-display: swap; src: url('/fonts/outfit-800.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('/fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url('/fonts/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url('/fonts/dm-sans-700.woff2') format('woff2'); }

:root {
  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.625rem);
  --text-h1: clamp(2.5rem, 1.9rem + 3.2vw, 4.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-24: 6rem;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --container: 1120px;
  --nav-h: 68px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-flip: cubic-bezier(0.45, 0, 0.55, 1);   /* the app's card flip */
  --dur-fast: 120ms;
  --dur-med: 280ms;
  --dur-flip: 360ms;

  --arena: #F97316;
  --mastery: #E4485F;
  --success: #10B981;
  --gold: #FBBF24;
  /* playing-card system (decks-edit/tokens.ts, verbatim) */
  --card-dark-face: #0F1325;
  --suit-ink-dark: #1e293b;
  --suit-ink-red: #dc2626;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #070b16;
  --bg-raise: rgba(13, 17, 36, 0.62);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.085);
  --card: rgba(17, 20, 41, 0.82);
  --line: rgba(163, 158, 205, 0.17);
  --line-strong: rgba(163, 158, 205, 0.32);
  --text: #F4F2FF;
  --text-2: #ABA6CB;
  --text-3: #7D78A3;
  --accent: #8B5CF6;
  --accent-2: #6366F1;
  --accent-ink: #A78BFA;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --arena-ink: #FB923C;
  --mastery-ink: #F0647A;
  --success-ink: #34D399;
  --on-accent: #FFFFFF;
  --shadow-card: 0 18px 48px rgba(2, 2, 18, 0.5);
  --shadow-pop: 0 10px 28px rgba(99, 102, 241, 0.3);
  --glow-alpha: 0.2;
  --nav-veil: rgba(7, 11, 22, 0.72);
  --plinth-bg: rgba(15, 14, 36, 0.55);
  --plinth-line: rgba(163, 158, 205, 0.14);
  /* GigaAtelier gallery, dark: top rim → vignette → floor scrim → six
     blobs (GEO + PALETTE stops A / .62A / .3A / .1A / 0) → L1 base ramp */
  --atmo:
    linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent) 50% 0 / 88% 1px no-repeat,
    radial-gradient(ellipse 110vw 66vh at 50% 26%, rgba(2, 3, 10, 0) 55%, rgba(2, 3, 10, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 5, 12, 0) 0%, rgba(4, 5, 12, 0) 38%, rgba(4, 5, 12, 0.55) 72%, rgba(3, 4, 9, 0.82) 100%),
    radial-gradient(58.5vw 25.8vh at 40.5vw 9.8vh, rgba(139, 92, 246, 0.4) 0%, rgba(139, 92, 246, 0.248) 35%, rgba(139, 92, 246, 0.12) 60%, rgba(139, 92, 246, 0.04) 82%, transparent 100%),
    radial-gradient(61.1vw 24.6vh at 89.1vw 2.7vh, rgba(59, 130, 246, 0.36) 0%, rgba(59, 130, 246, 0.223) 35%, rgba(59, 130, 246, 0.108) 60%, rgba(59, 130, 246, 0.036) 82%, transparent 100%),
    radial-gradient(56vw 24.6vh at 108vw 26.6vh, rgba(236, 72, 153, 0.33) 0%, rgba(236, 72, 153, 0.205) 35%, rgba(236, 72, 153, 0.099) 60%, rgba(236, 72, 153, 0.033) 82%, transparent 100%),
    radial-gradient(48.3vw 21.1vh at 56.3vw 41.1vh, rgba(234, 179, 8, 0.26) 0%, rgba(234, 179, 8, 0.161) 35%, rgba(234, 179, 8, 0.078) 60%, rgba(234, 179, 8, 0.026) 82%, transparent 100%),
    radial-gradient(53.4vw 22.3vh at 115.4vw 52.3vh, rgba(16, 185, 129, 0.26) 0%, rgba(16, 185, 129, 0.161) 35%, rgba(16, 185, 129, 0.078) 60%, rgba(16, 185, 129, 0.026) 82%, transparent 100%),
    radial-gradient(45.8vw 21.1vh at 37.8vw 61.1vh, rgba(59, 130, 246, 0.17) 0%, rgba(59, 130, 246, 0.105) 35%, rgba(59, 130, 246, 0.051) 60%, rgba(59, 130, 246, 0.017) 82%, transparent 100%),
    linear-gradient(180deg, #090C18 0%, #06070F 55%, #030409 100%);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f1ea;
  --bg-raise: rgba(255, 255, 255, 0.6);
  --surface: rgba(23, 20, 46, 0.045);
  --surface-strong: rgba(23, 20, 46, 0.08);
  --card: rgba(255, 255, 255, 0.88);
  --line: rgba(23, 20, 46, 0.11);
  --line-strong: rgba(23, 20, 46, 0.24);
  --text: #1A1633;
  --text-2: #55506F;
  --text-3: #8B87A8;
  --accent: #6D28D9;
  --accent-2: #4F46E5;
  --accent-ink: #6D28D9;
  --accent-soft: rgba(109, 40, 217, 0.1);
  --arena-ink: #C2570C;
  --mastery-ink: #BE3A50;
  --success-ink: #047857;
  --on-accent: #FFFFFF;
  --shadow-card: 0 18px 44px rgba(47, 42, 90, 0.13);
  --shadow-pop: 0 10px 26px rgba(79, 70, 229, 0.22);
  --glow-alpha: 0.13;
  --nav-veil: rgba(250, 250, 254, 0.72);
  --plinth-bg: rgba(255, 255, 255, 0.72);
  --plinth-line: rgba(23, 20, 46, 0.09);
  /* GigaAtelier gallery, light: same stack at the app's LIGHT_SCALE 0.7 */
  --atmo:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) 50% 0 / 88% 1px no-repeat,
    radial-gradient(ellipse 110vw 66vh at 50% 26%, rgba(210, 210, 228, 0) 55%, rgba(210, 210, 228, 0.3) 100%),
    linear-gradient(180deg, rgba(240, 240, 250, 0) 0%, rgba(240, 240, 250, 0) 42%, rgba(240, 240, 250, 0.55) 74%, rgba(236, 236, 246, 0.8) 100%),
    radial-gradient(58.5vw 25.8vh at 40.5vw 9.8vh, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0.174) 35%, rgba(139, 92, 246, 0.084) 60%, rgba(139, 92, 246, 0.028) 82%, transparent 100%),
    radial-gradient(61.1vw 24.6vh at 89.1vw 2.7vh, rgba(59, 130, 246, 0.252) 0%, rgba(59, 130, 246, 0.156) 35%, rgba(59, 130, 246, 0.076) 60%, rgba(59, 130, 246, 0.025) 82%, transparent 100%),
    radial-gradient(56vw 24.6vh at 108vw 26.6vh, rgba(236, 72, 153, 0.231) 0%, rgba(236, 72, 153, 0.143) 35%, rgba(236, 72, 153, 0.069) 60%, rgba(236, 72, 153, 0.023) 82%, transparent 100%),
    radial-gradient(48.3vw 21.1vh at 56.3vw 41.1vh, rgba(234, 179, 8, 0.182) 0%, rgba(234, 179, 8, 0.113) 35%, rgba(234, 179, 8, 0.055) 60%, rgba(234, 179, 8, 0.018) 82%, transparent 100%),
    radial-gradient(53.4vw 22.3vh at 115.4vw 52.3vh, rgba(16, 185, 129, 0.182) 0%, rgba(16, 185, 129, 0.113) 35%, rgba(16, 185, 129, 0.055) 60%, rgba(16, 185, 129, 0.018) 82%, transparent 100%),
    radial-gradient(45.8vw 21.1vh at 37.8vw 61.1vh, rgba(59, 130, 246, 0.119) 0%, rgba(59, 130, 246, 0.074) 35%, rgba(59, 130, 246, 0.036) 60%, rgba(59, 130, 246, 0.012) 82%, transparent 100%),
    linear-gradient(180deg, #FAFAFE 0%, #F2F2FA 55%, #ECECF6 100%);
}

/* The atmosphere: one fixed paint behind everything, both themes. */
body {
  background-color: var(--bg);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--atmo);
}

/* Theme crossfade — colors only; metrics identical in both themes. */
:root[data-theme-animate] body,
:root[data-theme-animate] body * {
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease, fill 150ms ease, box-shadow 150ms ease;
}

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