/* ==========================================================================
 * tokens.css — CR Coffee Shop design tokens
 *
 * Lifted from the CR Coffee Design System. Same palette, same type scale,
 * same hairline-and-cream visual language as the rest of crcoffeenola.com.
 *
 * "Serving Antique Roasted Coffee. New Orleans since 2015."
 * ========================================================================== */

/* Cafe Brewery (the hand-drawn CR display face) is intentionally NOT loaded
 * — it's personal-use-only per Brittney Murphy Design's license, and CR's
 * production sites use the wordmark as a PNG/JPG image (assets/img/cr-*.jpg)
 * to avoid the licensing issue. Headlines here use Playfair Display, which
 * carries the editorial Southern voice without the licensing problem. */

:root {
  /* ----- Color: raw palette ----- */
  --cr-red:                #A52639;   /* Million Dollar Red — paint on the door */
  --cr-red-hover:          #8A1E2F;
  --cr-cream:              #FAF8F5;   /* page background — warm off-white */
  --cr-cream-dark:         #F0EDE8;   /* inset panels */
  --cr-parchment:          #EFE7D8;
  --cr-charcoal:           #2A2A2A;   /* body type */
  --cr-charcoal-light:     #555555;
  --cr-ink:                #171717;
  --cr-hairline:           rgba(42, 42, 42, 0.12);
  --cr-hairline-dark:      rgba(42, 42, 42, 0.25);

  /* ----- Color: semantic aliases ----- */
  --bg:                    var(--cr-cream);
  --bg-panel:              var(--cr-cream-dark);
  --fg:                    var(--cr-charcoal);
  --fg-muted:              var(--cr-charcoal-light);
  --fg-strong:             var(--cr-ink);
  --fg-inverse:            var(--cr-cream);
  --accent:                var(--cr-red);
  --accent-hover:          var(--cr-red-hover);
  --border:                var(--cr-hairline);
  --border-strong:         var(--cr-hairline-dark);

  /* ----- Tile colors (game-specific, tuned to the cream ground) ----- */
  --tile-empty-border:     var(--cr-hairline-dark);
  --tile-typed-border:     var(--cr-charcoal);
  --tile-correct:          #6E8C56;   /* muted herbarium green */
  --tile-present:          #C49A3A;   /* muted gold */
  --tile-absent:           #5C5751;   /* dusty taupe */
  --tile-text-revealed:    #FAF8F5;

  /* ----- Type families ----- */
  --font-display:          'Cafe Brewery', 'Playfair Display', Georgia, serif;
  --font-serif:            'Playfair Display', 'Hoefler Text', Georgia, serif;
  --font-sans:             'Inter', -apple-system, 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:             'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* ----- Fluid type scale ----- */
  --text-xs:   clamp(0.6875rem, 0.6rem + 0.2vw,  0.75rem);
  --text-sm:   clamp(0.75rem,   0.7rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 1rem + 0.3vw,    1.1875rem);
  --text-xl:   clamp(1.25rem,   1.1rem + 0.5vw,  1.5rem);
  --text-2xl:  clamp(1.5rem,    1.2rem + 1vw,    2rem);
  --text-3xl:  clamp(2rem,      1.5rem + 1.5vw,  2.75rem);
  --text-4xl:  clamp(2.5rem,    1.8rem + 2.5vw,  3.75rem);

  /* ----- Spacing ----- */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.5rem;
  --space-lg:    2rem;
  --space-xl:    3rem;
  --space-2xl:   4rem;

  /* ----- Layout & effects ----- */
  --container-max:     1200px;
  --container-narrow:  800px;
  --header-height:     72px;
  --radius-0:          0;
  --radius-sm:         2px;
  --shadow-none:       none;
  --transition-base:   200ms ease;

  /* ----- Board geometry — square tiles sized to fit the viewport ----- */
  --tile-gap:        6px;
  --side-pad-min:    16px;
  --tile-size:       min(calc((100vw - 2 * var(--side-pad-min) - 4 * var(--tile-gap)) / 5), 64px);
  --board-width:     calc(5 * var(--tile-size) + 4 * var(--tile-gap));

  /* ----- Key geometry ----- */
  --key-height:      52px;
  --key-gap:         6px;
}