/* =========================================================
   Mother's Day Trivia — Design Tokens
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=DM+Sans:opsz,wght@9..40,400..700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: Brand ---------- */
  /* Aliases (--rose / --sage) preserved so existing components keep working */
  --teal:           #1F6F73;   /* primary action — deep teal */
  --teal-deep:      #16585C;   /* press/hover */
  --teal-soft:      #7FB4B6;   /* mid-tone teal fill */
  --teal-tint:      #DDEDEC;   /* very-light wash */
  --moss:           #4F7A52;   /* secondary accent — moss green */
  --moss-deep:      #36603A;
  --moss-tint:      #E1ECDD;
  --indigo:         #2A4A6B;   /* tertiary — deep blue */
  --indigo-soft:    #8FA8C0;

  /* legacy aliases — point at the new hues */
  --rose:           var(--teal);
  --rose-deep:      var(--teal-deep);
  --rose-soft:      var(--teal-soft);
  --rose-tint:      var(--teal-tint);
  --sage:           var(--moss);
  --sage-deep:      var(--moss-deep);
  --sage-tint:      var(--moss-tint);

  /* ---------- Color: Surface ---------- */
  --bone:           #FBF6EE;   /* default canvas — warm bone */
  --bone-deep:      #F2EBDD;   /* alternating tile */
  --paper:          #FFFFFF;   /* card fill */
  --ink:            #2B2A2E;   /* deep near-black */
  --ink-soft:       #4A4849;
  --ink-mute:       #8A8688;
  --ink-faint:      #C9C5BF;
  --vinyl:          #0E0D10;   /* records are truly black */
  --vinyl-sheen:    #1C1B1F;

  /* ---------- Color: Semantic ---------- */
  --bg:             var(--bone);
  --bg-alt:         var(--bone-deep);
  --bg-dark:        var(--ink);
  --fg:             var(--ink);
  --fg-soft:        var(--ink-soft);
  --fg-mute:        var(--ink-mute);
  --fg-on-dark:     var(--bone);
  --primary:        var(--rose);
  --primary-fg:     var(--bone);
  --accent:         var(--sage);
  --border:         rgba(43, 42, 46, 0.12);
  --border-strong:  rgba(43, 42, 46, 0.22);
  --success:        var(--sage);
  --warn:           #C8893E;

  /* ---------- Type: Family ---------- */
  --font-display:   'Fraunces', 'Times New Roman', serif;
  --font-body:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'DM Mono', 'Menlo', monospace;

  /* ---------- Type: Scale ---------- */
  --t-hero:         clamp(40px, 9vw, 72px);
  --t-display:      clamp(32px, 6vw, 48px);
  --t-h1:           32px;
  --t-h2:           24px;
  --t-h3:           20px;
  --t-lead:         19px;
  --t-body:         17px;
  --t-small:        15px;
  --t-caption:      13px;
  --t-micro:        11px;

  /* ---------- Spacing (4px base, fib-ish ramp) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- Radii ---------- */
  --r-chip:   2px;
  --r-card:   8px;
  --r-sleeve: 12px;
  --r-pill:   9999px;
  --r-disc:   50%;

  /* ---------- Shadows (only two!) ---------- */
  --shadow-vinyl:  0 12px 24px rgba(14,13,16,0.20);
  --shadow-sleeve: 0 2px 8px  rgba(14,13,16,0.06);

  /* ---------- Motion ---------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-arm:  cubic-bezier(0.65, 0.05, 0.35, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  600ms;
  --dur-spin:  3000ms;       /* 20 rpm */
}

/* =========================================================
   Semantic base
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--fg);
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h1);      }
h3 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }
p.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--fg-soft); }

.mono       { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.02em; text-transform: uppercase; }
.eyebrow    { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.caption    { font-size: var(--t-caption); color: var(--fg-mute); }

/* italic-serif accent (used for track titles) */
.serif-accent { font-family: var(--font-display); font-style: italic; font-weight: 400; }