/* ============================================================
   55 QUIZ — design tokens & base
   Aesthetic: bright, playful, game-show energy + smart editorial
   Brand motif: "55" — a live 0:55 countdown buzzer
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Brand constants (theme-independent) ---- */
  --brand:        #6C4DF6;   /* electric violet */
  --brand-ink:    #4A30D9;
  --brand-press:  #3F27C4;
  --lime:         #C8F94A;   /* acid buzzer / signature 55 highlight */
  --lime-ink:     #1c2a00;

  /* category / accent hues */
  --c-coral:  #FF6B5E;
  --c-amber:  #FFB23E;
  --c-lime:   #8FE04B;
  --c-cyan:   #25D0C0;
  --c-blue:   #4D9BFF;
  --c-pink:   #FF6FB3;
  --c-violet: #9B6BFF;
  --c-green:  #46C277;

  /* ---- radii (playful, generous) ---- */
  --r-xs: 9px;
  --r-sm: 13px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---- spacing (4pt) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ---- type ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: 200ms;

  /* tunables exposed to Tweaks */
  --tw-accent: var(--brand);
  --tw-radius-scale: 1;
}

/* ===================== LIGHT (default) ===================== */
[data-theme="light"] {
  --bg:        #FAF6EE;   /* warm cream canvas */
  --bg-2:      #F1EADD;   /* sunken */
  --surface:   #FFFFFF;
  --surface-2: #FBF8F2;
  --surface-header: #FFFFFF;   /* nav / topbar surface */
  --text:      #1A1822;
  --text-2:    #57525F;   /* muted */
  --text-3:    #8A8593;   /* faint */
  --border:    rgba(24,20,36,0.10);
  --border-2:  rgba(24,20,36,0.16);
  --shadow-sm: 0 1px 2px rgba(40,28,15,.06), 0 2px 8px rgba(40,28,15,.05);
  --shadow-md: 0 4px 14px rgba(40,28,15,.10), 0 12px 30px rgba(40,28,15,.08);
  --shadow-lg: 0 10px 28px rgba(40,28,15,.14), 0 28px 60px rgba(40,28,15,.12);
  --shadow-pop: 0 6px 0 rgba(24,20,36,.12);  /* chunky offset for buttons */
  --scrim: rgba(26,18,40,.42);
  --on-brand: #FFFFFF;
  --grain-op: .035;
}

/* ===================== DARK (neutral warm-grey) ===================== */
[data-theme="dark"] {
  --bg:        #161618;
  --bg-2:      #1F1F21;
  --surface:   #1E1E20;
  --surface-2: #29292B;
  --surface-header: #2B2723;   /* warm greige nav / topbar */
  --text:      #F3F2EF;
  --text-2:    #A8A6A1;
  --text-3:    #757370;
  --border:    rgba(255,255,255,0.10);
  --border-2:  rgba(255,255,255,0.17);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 50px rgba(0,0,0,.6);
  --shadow-pop: 0 6px 0 rgba(0,0,0,.45);
  --scrim: rgba(4,3,10,.62);
  --on-brand: #FFFFFF;
  --grain-op: .05;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--lime); color: var(--lime-ink); }

/* tabular numbers everywhere numbers matter */
.tnum { font-variant-numeric: tabular-nums; }

/* scrollbars (subtle) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- reusable type classes ---- */
.t-display { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; }
.t-h1 { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -.02em; }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.12; letter-spacing: -.015em; }
.t-h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.18; letter-spacing: -.01em; }
.t-body { font-size: 15px; line-height: 1.5; }
.t-sm { font-size: 13px; line-height: 1.45; }
.t-label { font-size: 13px; font-weight: 600; }
.t-over { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.t-mono { font-family: var(--font-mono); }

/* grain overlay helper */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: var(--grain-op);
  mix-blend-mode: overlay;
  border-radius: inherit;
}

/* keyframes */
@keyframes pop-in { from { transform: translateY(8px); } to { transform: none; } }
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes buzzer-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime) 70%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

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