/* =========================================================
   TRIVIA RUSH — Color & Type Tokens
   Mobile trivia game. Playful, energetic, Spanish-first.
   ========================================================= */

/* -- Fonts: Inter (self-hosted, brand-uploaded OTF) ----------
   Inter covers display (Black 900) and body (Regular–Bold).
   All weights & italics from /fonts/. */
@font-face { font-family:'Inter'; font-weight:100; font-style:normal; src:url('fonts/Inter-Thin-BETA.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:100; font-style:italic; src:url('fonts/Inter-ThinItalic-BETA.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:200; font-style:normal; src:url('fonts/Inter-ExtraLight-BETA.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:200; font-style:italic; src:url('fonts/Inter-ExtraLightItalic-BETA.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:300; font-style:normal; src:url('fonts/Inter-Light-BETA.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:300; font-style:italic; src:url('fonts/Inter-LightItalic-BETA.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; src:url('fonts/Inter-Regular.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:400; font-style:italic; src:url('fonts/Inter-Italic.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; src:url('fonts/Inter-Medium.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:500; font-style:italic; src:url('fonts/Inter-MediumItalic.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; src:url('fonts/Inter-SemiBold.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:600; font-style:italic; src:url('fonts/Inter-SemiBoldItalic.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; src:url('fonts/Inter-Bold.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:700; font-style:italic; src:url('fonts/Inter-BoldItalic.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:800; font-style:normal; src:url('fonts/Inter-ExtraBold.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:800; font-style:italic; src:url('fonts/Inter-ExtraBoldItalic.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:900; font-style:normal; src:url('fonts/Inter-Black.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:900; font-style:italic; src:url('fonts/Inter-BlackItalic.otf') format('opentype'); font-display:swap; }

:root {
  /* ---------- Brand palette (primary 4) ---------- */
  --tr-violet:        #6C3BFF;   /* primary brand — backgrounds, hero */
  --tr-violet-deep:   #4A21D9;   /* pressed, deep accents */
  --tr-violet-soft:   #8E66FF;   /* hovers, highlights */

  --tr-yellow:        #FFD60A;   /* "A" answer, points, sun energy */
  --tr-yellow-deep:   #E6B800;
  --tr-yellow-soft:   #FFE45C;

  --tr-pink:          #FF4D8D;   /* "B" answer, hearts, streak fire */
  --tr-pink-deep:     #E12C6F;
  --tr-pink-soft:     #FF7DAB;

  --tr-mint:          #00E5A8;   /* correct, "D" answer, success */
  --tr-mint-deep:     #00B886;
  --tr-mint-soft:     #5CF0C5;

  /* Auxiliary brand */
  --tr-cyan:          #38BDF8;   /* "C" answer, cool accents */
  --tr-cyan-deep:     #0284C7;
  --tr-coral:         #FF6B35;   /* warning / hot streak */
  --tr-cream:         #FFF7E6;   /* warm card background on dark */

  /* ---------- Neutrals ---------- */
  --tr-ink:           #0E0828;   /* near-black, brand-tinted violet-black */
  --tr-ink-2:         #1B1240;
  --tr-ink-3:         #2E2360;
  --tr-slate:         #524A78;
  --tr-slate-2:       #8A82B5;
  --tr-mist:          #C9C4E2;
  --tr-fog:           #E8E5F5;
  --tr-cloud:         #F5F3FB;
  --tr-white:         #FFFFFF;

  /* ---------- Semantic foreground ---------- */
  --fg1:              var(--tr-ink);          /* primary text on light */
  --fg2:              var(--tr-slate);        /* secondary text */
  --fg3:              var(--tr-slate-2);      /* tertiary, captions */
  --fg-on-dark:       var(--tr-white);
  --fg-on-dark-2:     #D6CFFA;
  --fg-brand:         var(--tr-violet);

  /* ---------- Semantic background ---------- */
  --bg-app:           var(--tr-violet);       /* the app's signature backdrop */
  --bg-app-deep:      var(--tr-ink);          /* alt dark background */
  --bg-surface:       var(--tr-white);        /* cards, sheets */
  --bg-surface-2:     var(--tr-cloud);        /* subtle elevations */
  --bg-surface-3:     var(--tr-fog);          /* dividers, chip rest */

  /* ---------- Semantic state ---------- */
  --state-correct:    var(--tr-mint);
  --state-correct-bg: #DFFFF3;
  --state-wrong:      var(--tr-pink);
  --state-wrong-bg:   #FFE2EC;
  --state-warning:    var(--tr-coral);
  --state-info:       var(--tr-cyan);

  /* ---------- Answer slot colors (A/B/C/D) ---------- */
  --ans-a: var(--tr-yellow);
  --ans-b: var(--tr-pink);
  --ans-c: var(--tr-cyan);
  --ans-d: var(--tr-mint);

  /* ---------- Type families ---------- */
  --font-display:  'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --font-body:     'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (mobile-first) ---------- */
  --t-display-xl:  56px;   /* big score, splash hero */
  --t-display-lg:  44px;
  --t-display-md:  36px;
  --t-h1:          28px;
  --t-h2:          22px;
  --t-h3:          18px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     12px;
  --t-eyebrow:     11px;   /* uppercase tracking */

  /* Line heights */
  --lh-tight:      1.04;
  --lh-snug:       1.18;
  --lh-normal:     1.4;
  --lh-loose:      1.55;

  /* Tracking */
  --tr-tight:      -0.02em;
  --tr-normal:     0;
  --tr-wide:       0.04em;
  --tr-mega:       0.12em;  /* eyebrow / category labels */

  /* ---------- Spacing scale ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* ---------- Radii (chunky, friendly) ---------- */
  --r-1:    8px;
  --r-2:   12px;
  --r-3:   16px;
  --r-4:   20px;
  --r-5:   28px;     /* default card */
  --r-6:   36px;     /* answer pill */
  --r-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  /* Brand shadows are tinted purple, not gray. */
  --shadow-1: 0 2px 0 rgba(14,8,40,0.12);
  --shadow-2: 0 4px 0 rgba(14,8,40,0.18);          /* "stacked" press shadow */
  --shadow-3: 0 8px 24px -8px rgba(76,33,217,0.32);
  --shadow-4: 0 16px 40px -12px rgba(76,33,217,0.45);
  --shadow-glow-mint: 0 0 0 6px rgba(0,229,168,0.22);
  --shadow-glow-pink: 0 0 0 6px rgba(255,77,141,0.22);

  /* "Hard" shadow used on bouncy buttons (bottom border simulation) */
  --hard-violet: 0 6px 0 var(--tr-violet-deep);
  --hard-yellow: 0 6px 0 var(--tr-yellow-deep);
  --hard-pink:   0 6px 0 var(--tr-pink-deep);
  --hard-mint:   0 6px 0 var(--tr-mint-deep);
  --hard-ink:    0 6px 0 var(--tr-ink);

  /* Motion */
  --ease-bounce:  cubic-bezier(.34,1.56,.64,1);
  --ease-out:     cubic-bezier(.22,.61,.36,1);
  --ease-snap:    cubic-bezier(.6,.1,.3,1);
  --d-fast:    140ms;
  --d-base:    220ms;
  --d-slow:    420ms;
}

/* =========================================================
   Base elements — semantic typography
   ========================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.display-xl { font-size: var(--t-display-xl); }
.display-lg { font-size: var(--t-display-lg); }
.display-md { font-size: var(--t-display-md); }

p, .body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.body-sm  { font-size: var(--t-body-sm); line-height: var(--lh-normal); color: var(--fg2); }
.caption  { font-size: var(--t-caption); color: var(--fg3); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-mega);
  text-transform: uppercase;
  color: var(--fg-brand);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Helpers used across previews */
.tr-card {
  background: var(--bg-surface);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-3);
}