/* ==========================================================================
   tokens.css — design tokens for the whole site.
   Source of truth for color values: brief/brand-palette-board.html
   (the "field-guide" palette). If a hex changes, change it there AND here.

   Theming model:
   - Light is the PRIMARY theme and lives on :root.
   - Dark ("terrarium at night") overrides the same custom properties under
     html[data-theme="dark"].
   - Every component reads only these variables, so the theme toggle is just
     an attribute flip — no component-level theme code anywhere.
   ========================================================================== */

:root {
  /* ----- color · light ------------------------------------------------- */
  --bg:           #FBF6EB;   /* page background — warm cream            */
  --surface:      #FFFFFF;   /* raised cards & panels                   */
  --surface-soft: #CDE8C5;   /* soft mint — card fills, hero            */
  --primary:      #3E7C4F;   /* deep leaf green — headings, nav, logo   */
  --primary-2:    #6FB07A;   /* fresh leaf green — fills, icons, hovers */
  --shell:        #7B4A2D;   /* rich mahogany — shell accents           */
  --caramel:      #9A6435;   /* warm caramel — eyebrows, accents (AA)   */
  --tan:          #EAD9BD;   /* sandy tan — warm neutral panels, tags   */
  --coral:        #F2765B;   /* CTA ONLY — one most-important action    */
  --gold:         #F6C453;   /* badges, stars                           */
  --teal:         #2A7A8C;   /* links, science accents (AA on cream)    */
  --text:         #3A2E25;   /* body ink & outlines                     */
  --text-muted:   #7B4A2D;
  --outline:      #3A2E25;   /* the thick cartoon outline color         */
  --on-accent:    #3A2E25;   /* label ink on warm accent buttons (AA)   */
  --on-primary:   #FBF6EB;   /* light ink on the deep-green primary btn */
  --shadow:       0 6px 0 rgba(58, 46, 37, .12);  /* chunky hard shadow */

  /* ----- type ----------------------------------------------------------- */
  --font-display: "Fredoka", system-ui, sans-serif;     /* headings, UI   */
  --font-body:    "Nunito Sans", system-ui, sans-serif; /* body copy      */

  /* ----- shape ----------------------------------------------------------
     The "thick outline + hard offset shadow" look (Beast-Academy-style)
     is built from these two tokens — keep them consistent everywhere.    */
  --line:       3px solid var(--outline);
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  28px;
}

/* ----- color · dark ("terrarium at night") ------------------------------ */
html[data-theme="dark"] {
  --bg:           #1E211B;
  --surface:      #2A2F27;
  --surface-soft: #34402F;
  --primary:      #8FD09A;
  --primary-2:    #7FC089;
  --shell:        #D8A878;
  --caramel:      #D8A878;
  --tan:          #C9B79A;
  --coral:        #F98A71;
  --gold:         #F8CF63;
  --teal:         #84D2DF;
  --text:         #ECE3D2;
  --text-muted:   #C9B79A;
  --outline:      #5A5446;
  --on-accent:    #1E211B;
  --on-primary:   #1E211B;   /* dark ink on the light-green primary btn */
  --shadow:       0 6px 0 rgba(0, 0, 0, .35);
}