/* ─────────────────────────────────────────────────────────────────────────
   FlashQuest design tokens v2 — colors, type, space, and the page ATMOSPHERE.
   Both themes are first-class. The atmospheres are ported verbatim from the
   app's AuroraBackground: dark = the night canvas stack, light = the warm
   cream→lavender atelier with its top veil. 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: #060a16;
  --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(6, 9, 22, 0.72);
  --plinth-bg: rgba(15, 14, 36, 0.55);
  --plinth-line: rgba(163, 158, 205, 0.14);
  /* AuroraBackground dark stack, verbatim colors */
  --atmo:
    radial-gradient(120% 62% at 50% -8%, rgba(129, 140, 248, 0.18), rgba(56, 189, 248, 0.05) 52%, transparent 74%),
    linear-gradient(180deg, #0a1228 0%, #070d1c 30%, #050912 55%, #03060e 78%, #02040a 100%);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #eef0f9;
  --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(249, 247, 242, 0.72);
  --plinth-bg: rgba(255, 255, 255, 0.72);
  --plinth-line: rgba(23, 20, 46, 0.09);
  /* AuroraBackground light atelier, verbatim colors + warm veil */
  --atmo:
    radial-gradient(110% 48% at 50% -6%, rgba(255, 252, 244, 0.82), rgba(255, 247, 232, 0.28) 46%, transparent 70%),
    linear-gradient(180deg, #f9f7f2 0%, #eef1fb 34%, #e4e5f6 68%, #d8d9ee 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) {
  /* Public surfaces honor the OS preference. The studio is exempt while its
     own Motion toggle says full: it exists to author and judge the app's
     real animation, and carries its own [data-motion='reduced'] kill-switch
     when the editor wants stillness. */
  *:not([data-motion='full']):not([data-motion='full'] *),
  *:not([data-motion='full']):not([data-motion='full'] *)::before,
  *:not([data-motion='full']):not([data-motion='full'] *)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}