/* ============================================================
   MK QUIZ — DESIGN TOKENS
   Adapted from the Mega Keratin brandbook canon (tokens.css).
   Fonts are self-hosted: the app must work on an offline LAN.
   Layer 1: primitives · Layer 2: semantics · Layer 3: quiz theme
   ============================================================ */

@import url("/css/fonts.css");

:root {
  /* 1 · PRIMITIVES — brandbook */
  --mk-purple:      #6709F9;
  --mk-purple-deep: #6709A9;
  --mk-pink:        #F604EE;
  --mk-pink-bright: #F10AEF;
  --mk-pink-media:  #FA23BC;
  --mk-ink:         #1B1B1B;
  --mk-white:       #FFFFFF;
  --gold:           #E8C36A;

  --ink-950: #0C0C0D; --ink-900: #111112; --ink-800: #161617;
  --ink-700: #1B1B1B; --ink-600: #242425; --ink-500: #2F2F31;
  --ink-400: #3C3C3F; --ink-300: #565659; --ink-200: #8A8A8E;
  --ink-100: #C7C7CC; --ink-050: #ECECEE;

  --white-92: rgba(255,255,255,.92); --white-70: rgba(255,255,255,.70);
  --white-50: rgba(255,255,255,.50); --white-32: rgba(255,255,255,.32);
  --white-14: rgba(255,255,255,.14); --white-08: rgba(255,255,255,.08);
  --white-04: rgba(255,255,255,.04);

  --status-success: #1FD1A0;
  --status-warning: #FFB020;
  --status-danger:  #FF4D6D;
  --status-info:    var(--mk-purple);

  /* 2 · TYPOGRAPHY */
  --font-primary: "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-accent:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-mono:    "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.2rem + 6vw, 4.75rem);
  --fs-h1: 3rem; --fs-h2: 2.25rem; --fs-h3: 1.75rem; --fs-h4: 1.375rem;
  --fs-lead: 1.125rem; --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .75rem;
  --fw-thin: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --tracking-tight: -0.02em; --tracking-wide: 0.08em; --tracking-wider: 0.18em;

  /* 3 · SPACING (4px grid) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;

  /* 4 · RADII */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* 5 · BORDERS */
  --border-subtle: var(--white-08);
  --border-default: var(--white-14);
  --border-strong: var(--white-32);

  /* 6 · ELEVATION */
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 6px 18px rgba(0,0,0,.45);
  --shadow-3: 0 16px 38px rgba(0,0,0,.55);
  --shadow-4: 0 28px 64px rgba(0,0,0,.62);
  --glow-brand: 0 10px 36px color-mix(in srgb, var(--qa) 28%, transparent),
                0 10px 36px color-mix(in srgb, var(--qb) 24%, transparent);

  /* 7 · MOTION */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-out-quint: cubic-bezier(.22,1,.36,1);

  /* 8 · LAYOUT */
  --container: 1120px;
  --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-toast: 1100; --z-confetti: 1200;

  /* 9 · SEMANTICS */
  --color-bg: var(--ink-950);
  --color-surface: var(--ink-800);
  --color-surface-raised: var(--ink-700);
  --color-surface-sunken: var(--ink-900);
  --color-border: var(--border-default);
  --color-border-subtle: var(--border-subtle);
  --color-text: var(--white-92);
  --color-text-secondary: var(--white-70);
  --color-text-muted: var(--white-50);
  --color-text-on-brand: var(--mk-white);
  --color-focus: var(--qa);
  --color-link: #C79BFF;

  /* 10 · QUIZ THEME — JS sets --qa/--qb from quiz settings (§4 of CONTRACT) */
  --qa: var(--mk-pink);
  --qb: var(--mk-purple);
  --qgrad: linear-gradient(120deg, var(--qa) 0%, var(--qb) 100%);
  /* pre-darkened for white text on interactive surfaces (AA, canon --grad-brand-cta) */
  --qgrad-cta: linear-gradient(rgba(15,2,20,.30), rgba(15,2,20,.30)),
               linear-gradient(120deg, var(--qa) 0%, var(--qb) 100%);
  --qa-tint-16: color-mix(in srgb, var(--qa) 16%, transparent);
  --qa-tint-10: color-mix(in srgb, var(--qa) 10%, transparent);
  --qb-tint-16: color-mix(in srgb, var(--qb) 16%, transparent);
  --qa-line: color-mix(in srgb, var(--qa) 45%, transparent);
  --qveil: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--qb) 18%, transparent), transparent 60%),
           radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--qa) 14%, transparent), transparent 55%);

  /* Answer-option palette (index 1..8), distinct on dark ink */
  --opt-1: #F604EE; --opt-2: #7A2BFA; --opt-3: #1FD1A0; --opt-4: #FFB020;
  --opt-5: #FF4D6D; --opt-6: #38BDF8; --opt-7: #C79BFF; --opt-8: #A3E635;
}

/* Base document ------------------------------------------------ */
html { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Quiz background modes (set document.body.dataset.bg) ---------- */
body[data-bg="veil"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--qveil), var(--color-bg);
  pointer-events: none;
}
body[data-bg="gradient"] {
  background: linear-gradient(150deg, color-mix(in srgb, var(--qb) 42%, var(--ink-950)) 0%, var(--ink-950) 72%) fixed;
}
body[data-bg="solid"] { background: var(--color-bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}