/* Design system v1.1: "Marquee Dusk" in midnight. Locked 2026-11-05, audited 2026-11-05.
   Tokens only: colors, type, shape, depth, spacing. Components use these; rules in DESIGN-SYSTEM.md.
   Change a value here and every page follows. The starter kit mirrors these values for games. */

/* Archivo, served from our own address (no Google request). One variable file: width 62-125%, weight 400-900. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Background: a midnight glow. Fixed to the screen, so cards low on the page never sit on the darkest color. */
  --gm-glow: #6a58cc;   /* top of the screen; cream text passes 4.5:1 here */
  --gm-mid: #3b3088;
  --gm-deep: #30277a;   /* bottom of the screen; kept light enough for card edges to read */
  --gm-bg: radial-gradient(110% 60% at 50% -6%, var(--gm-glow) 0%, var(--gm-mid) 50%, var(--gm-deep) 100%);
  --gm-result-glow: #a283ff88;  /* extra warmth at the top of result screens */
  --gm-panel: #2a2170;          /* shelf panel and other flat surfaces on midnight */

  /* Ink and paper. Approved pairs: cream on midnight, ink on card colors. Never cream on a card color. */
  --gm-cream: #fff0e0;  /* text on midnight, tiles, modules */
  --gm-ink: #1d1318;    /* text on colored cards and cream */
  --gm-soft: #dccfff;   /* quiet text (dates, counts). On mid or deep only, never on the top glow */
  --gm-edge: #0b0608;   /* outlines and hard shadows on everything raised */
  --gm-faint: rgba(255, 240, 224, .5);  /* outlines on midnight: unselected pills, empty tiles (3:1 or better) */

  /* Card colors: each game picks one by name (about.cover.color). */
  --gm-yellow: #f4b942;
  --gm-orange: #ef8a47;
  --gm-pink: #ee7a9b;
  --gm-green: #78cfae;
  --gm-red: #e8674f;
  --gm-purple: #b79be6;
  --gm-accent: var(--gm-yellow);   /* primary buttons, active states */

  /* Meaning colors (game pieces, results). Always paired with a shape or label, never color alone. */
  --gm-start: var(--gm-yellow);
  --gm-hit: var(--gm-green);
  --gm-changed: var(--gm-pink);

  /* Focus: a cream ring with an edge gap, visible on midnight and on every card color. */
  --gm-focus: 0 0 0 3px var(--gm-edge), 0 0 0 6px var(--gm-cream);

  /* Type. Archivo does both jobs: expanded and heavy for titles, normal width for reading. */
  --gm-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gm-title-stretch: 125%;
  --gm-text-tag: 11px;    /* stickers only (uppercase, heavy) */
  --gm-text-xs: 12px;     /* captions under titles */
  --gm-text-sm: 14px;     /* quiet text, buttons in tight places */
  --gm-text-md: 16px;     /* body: same floor as the game rulebook */
  --gm-text-lg: 19px;     /* card title, section title */
  --gm-text-xl: 28px;     /* game title, logo */
  --gm-text-hero: clamp(40px, 12vw, 54px);   /* hero and result headline; shrinks on narrow phones */

  /* Shape. */
  --gm-r-card: 18px;
  --gm-r-tile: 12px;
  --gm-r-key: 9px;
  --gm-r-chip: 7px;
  --gm-r-pill: 99px;
  --gm-line: 2.5px;       /* outline width on every raised thing */

  /* Depth: hard edge shadow plus a bright top edge. This is the "pop". Never soft blur shadows on pieces. */
  --gm-shadow-card: 4px 5px 0 var(--gm-edge), inset 0 3px 0 rgba(255, 255, 255, .35);
  --gm-shadow-tile: 0 6px 0 var(--gm-edge), inset 0 3px 0 rgba(255, 255, 255, .5);
  --gm-shadow-key: 0 3px 0 var(--gm-edge);
  --gm-shadow-small: 3px 3px 0 var(--gm-edge);
  --gm-press: translateY(3px);   /* pressed pieces drop into their shadow */

  /* Spacing. */
  --gm-space-1: 4px;
  --gm-space-2: 8px;
  --gm-space-3: 12px;
  --gm-gutter: 18px;        /* side margin: 18px phone, 44px desktop */
  --gm-section-gap: 30px;
  --gm-touch: 44px;         /* smallest tap target (keyboard keys: 44px tall, may be narrower) */
  /* Safe areas: the iPhone status bar and home bar. */
  --gm-safe-top: env(safe-area-inset-top, 0px);
  --gm-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Desktop layout starts at 760px wide (CSS can't read this from a token; media queries say 760px). */
}
@media (min-width: 760px) { :root { --gm-gutter: 44px; --gm-text-hero: 72px; } }