/* =============================================================================
   LetterConnect — tokens.css   ·   "Arcade Purple"
   -----------------------------------------------------------------------------
   The shared palette, type stack, radii and shadows. Lifted out of styles.css so
   the marketing page (site.css) and the game board (styles.css) cannot drift
   apart — change a colour here and both surfaces follow.

   Load order matters: this file must come BEFORE the page stylesheet that uses
   it, in both index.html and game.html.
   ========================================================================== */
:root {
  /* Stage (behind everything) */
  --stage-1:     #3A1D80;
  --stage-2:     #5B21B6;
  --stage-3:     #7C3AED;
  --pink-glow:   #F72585;

  /* Cards & the ink that sits on them */
  --card:        #FFFFFF;
  --card-2:      #FBF8FF;
  --card-ink:      #241150;
  --card-ink-soft: #6A579F;
  --card-ink-mute: #A99AD0;
  --line:        rgba(124, 58, 237, .14);
  --line-strong: rgba(124, 58, 237, .30);

  /* Ink that sits directly on the purple stage */
  --ink:       #F4EEFF;
  --ink-soft:  #CDBEF3;
  --ink-mute:  #A290D6;

  /* Accents */
  --accent:      #7C3AED;   /* grape — "live" meaning, selected states  */
  --accent-ink:  #FFFFFF;
  --accent-soft: #EFE7FF;   /* lavender chip / current-row fill          */
  --pink:        #F72585;   /* candy pink — the letter hand-off          */

  --gold-1:      #FFDE6A;
  --gold-2:      #F7A81B;
  --gold-ink:    #5B3B00;

  --coral-1:     #FF9A6B;   /* hero CTA gradient                         */
  --coral-2:     #F94E7F;

  --ok:          #16A34A;
  --ok-glow:     #22C55E;
  --bad:         #F43F5E;
  --warn:        #E8820B;
  --heat:        #FB5B18;   /* streak flame */

  --ring:        0 0 0 4px rgba(255, 210, 77, .55);

  --font-sans:    "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-mono:    "Nunito", "Segoe UI", system-ui, sans-serif;  /* label/caption role */

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --pill: 999px;
  --wrap: 940px;

  --shadow:      0 18px 44px rgba(28, 8, 70, .40);
  --shadow-card: 0 14px 34px rgba(30, 8, 80, .30);
  --shadow-soft: 0 6px 18px rgba(30, 8, 80, .18);
}