/* ══════════════════════════════════════════════════════════════
   Heartability style tokens — shared colors, type scale, + fonts.
   Link this file (e.g. <link rel="stylesheet" href="../assets/css/tokens.css">)
   to get the three custom fonts loaded and every color/font-size
   token below available, without redeclaring any of it per page.
   Pages keep their own :root block only for genuinely page-specific
   colors (illustration accents, one-off semantic colors) — every
   color and font-size role that's actually universal lives here.

   Colors are the "dynamic palette" established 2026-09-11,
   replacing the old --blue/--purple family (#6e83d3 base retired to
   wisteria, #3a4aaa shadow retired to bluebell). #4a5bc4 (lilac)
   kept its original hex, renamed only.

   Second unification pass (same day): added --aqua/--cream/
   --cream-dark/--ink/--line/--error/--danger* — all previously
   local variables (under many different names per page) pointing
   at the same hex sitewide, now centralized. Also added a 7-tier
   type scale (--fs-h1..--fs-h7 + --fs-nav-title) since font size
   was scattered with no shared scale and users reported text being
   too small — the smallest tiers were deliberately raised, not just
   centralized as-is. See /Users/zoe/.claude/plans/expressive-sauteeing-token.md
   for the full audit and execution plan.

   Excluded from this whole project (colors AND type scale):
   games/infinity-mirror.html, games/bingo.html, games/treasure-map.html
   — they keep their own local palette/sizes untouched.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "ZoesHandwriting";
  src: url("../fonts/ZoesHandwriting-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "PFPixelscript";
  src: url("../fonts/PFPixelscriptProRegular.ttf") format("truetype");
}
@font-face {
  font-family: "MazzyTM";
  src: url("../fonts/mazzy-TM.otf") format("opentype");
}

:root {
  /* ── Brand colors ── */
  --lilac:      #4a5bc4;
  --periwinkle: #bac9ff;
  --wisteria:   #5e80ff;
  --bluebell:   #2858ff;
  --goldenrod:  #e8b400;
  --rose:       #e8478b;

  /* ── Universal utility colors ── */
  --aqua:       #83d2e6;
  --cream:      #dfe2ef;
  --cream-dark: #cdd3ec;
  --mint:       #c9fff5;
  --ink:        #000f5a;
  --line:       #111111;
  --iris:       #5465c5;  /* blue-panel bevel highlight edge (top/left), 4th shade alongside wisteria/bluebell/lilac */
  --slate:      #7a86bb;  /* muted secondary/label text color */
  --parchment:  #f1ebe4;  /* room back-wall warm tan (was --back-wall, drift-merged from #f0ece4) */
  --linen:      #e8e4dc;  /* room side-wall warm gray (was --side-col, drift-merged from #dbd6ce) */
  --error:      #c0392b;

  /* ── Danger / destructive-action bevel (base/dark/shadow, same pattern as brand colors) ── */
  --danger:        #d9534f;
  --danger-dark:   #b33a36;
  --danger-shadow: #8a2a27;

  /* ── Fonts ── */
  --font-heading: "MazzyTM", cursive;         /* H1 / H2 */
  --font-hand:    "ZoesHandwriting", cursive; /* body copy */
  --font-pixel:   "PFPixelscript", cursive;   /* popup / window title-bar labels */

  /* ── Type scale (7 visual tiers, largest to smallest) ── */
  --fs-h1: clamp(48px, 6vw,   92px); /* full-bleed hero / banner titles */
  --fs-h2: clamp(30px, 3.2vw, 40px); /* section headers, modal-style large headings */
  --fs-h3: clamp(23px, 2.2vw, 27px); /* subtitles, popup titles, large card titles */
  --fs-h4: clamp(19px, 1.8vw, 22px); /* lead body / prominent paragraph */
  --fs-h5: clamp(17px, 1.6vw, 19px); /* standard body, buttons, inputs */
  --fs-h6: clamp(15px, 1.4vw, 17px); /* labels, form controls */
  --fs-h7: clamp(14px, 1.3vw, 16px); /* meta / caption / badge / footnote */

  /* nav-title bar — the real semantic <h1> on most pages, deliberately outside the scale */
  --fs-nav-title: clamp(21px, 1.6vw, 25px);
}