/* ==========================================================================
   MONKEY KING MINIS — DESIGN TOKENS (the master design language file)
   ==========================================================================
   THEME: "Sunroom" — midcentury-modern × Japandi. A warm oatmeal canvas with
   soft-warm-white cards, warm charcoal ink (never pure black), and five deep,
   earthy midcentury accents (brick red, aubergine, teal, terracotta, olive)
   over a goldenrod trim. Light, warm, calm, and playful. Fonts: Baloo 2
   (friendly geometric display) + Mulish (humanist body) + Space Mono (stats).
   The prior dark "Rocket Studio" theme is preserved in tokens-rocket.css, and
   the original warm-paper print theme in tokens-classic.css — copy either over
   this file to switch back.

   TO CHANGE THE WHOLE SITE'S FEEL, edit six tokens:
     --color-bg          (the canvas)
     --color-gold        (the trim — goldenrod)
     --font-display      (the voice)
     any --color-accent-* / --color-soft-* pair  (a section's identity)
   NEVER edit --tap-min, the --text-* scale, or the -current aliases —
   those are the ergonomics, not the skin.
   Full spec: site/DESIGN_LANGUAGE.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Mulish:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Base & surfaces (structural) ---- */
  --color-bg:           #F2ECE0;   /* warm oatmeal — the Japandi light, warm-neutral canvas */
  --color-surface:      #FBF7F0;   /* soft warm white — cards/panels lift off the oatmeal */
  --color-surface-dark: #141414;   /* art panels — matches the unit PNG backgrounds (KEEP) */
  --color-text:         #2B2A28;   /* soft warm charcoal ink (matches the logo), never pure black */
  --color-text-muted:   #574F45;   /* warm taupe — secondary text, tuned to ~7:1 on cards */
  --color-gold:         #C0902B;   /* the trim — midcentury goldenrod; decorative rules only, never text */
  --color-line:         #E4DBCB;   /* soft tan hairline */
  --color-focus:        #2358C9;   /* focus rings only — cobalt blue, outside every warm section palette */
  --color-on-accent:    #FCF9F3;   /* warm white — text set on solid accent fills */

  /* ---- Faction / section accents (the re-theme surface) ----
     Deep, warm, saturated-but-earthy midcentury hues; each pairs with a pale -soft tint. */
  --color-accent-chaos:    #B0322A;  /* warm brick red */
  --color-soft-chaos:      #F3DFD8;
  --color-accent-shadow:   #7A4A73;  /* midcentury aubergine / plum */
  --color-soft-shadow:     #EBDCE8;
  --color-accent-ultra:    #1B726C;  /* teal / aqua */
  --color-soft-ultra:      #D8E8E4;
  --color-accent-campaign: #A6481B;  /* burnt orange / terracotta — the flagship */
  --color-soft-campaign:   #F5E2CF;
  --color-accent-rules:    #5C6A28;  /* olive / avocado */
  --color-soft-rules:      #E4E7CE;

  /* ---- Semantic aliases (structural — set by body.theme-*) ---- */
  --color-accent-current: var(--color-accent-chaos);
  --color-soft-current:   var(--color-soft-chaos);

  /* ---- Type (Baloo 2 display, Mulish humanist body, Space Mono stats) ---- */
  --font-display: 'Baloo 2', 'Trebuchet MS', 'Avenir Next', Helvetica, sans-serif;
  --font-body:    'Mulish', 'Avenir Next', 'Segoe UI', Helvetica, sans-serif;
  --font-flavor:  'Mulish', 'Avenir Next', Helvetica, sans-serif; /* used italic */
  --font-stat:    'Space Mono', Menlo, 'Courier New', monospace;  /* stats, chip labels, badges */

  /* 1.25 scale on an 18px base (html font-size: 112.5%) — kid-first, deliberately large */
  --text-xs:   0.833rem;  /* 15px — floor; chip labels & badges only */
  --text-sm:   0.889rem;  /* 16px — captions, flavor, footnotes */
  --text-base: 1rem;      /* 18px — all body copy */
  --text-lg:   1.222rem;  /* 22px — lead paragraphs, ability names */
  --text-xl:   1.556rem;  /* 28px — card names, section headers, stat values */
  --text-2xl:  2rem;      /* 36px — page titles */
  --text-3xl:  2.667rem;  /* 48px — home hero */

  --weight-body:    400;
  --weight-bold:    700;
  --weight-display: 800;
  --leading-tight: 1.2;
  --leading-body:  1.6;

  /* ---- Space & shape ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-chip:  10px;   /* softened for Japandi calm */
  --radius-card:  18px;
  --radius-panel: 12px;
  --radius-pill:  999px;

  --border-card:     2.5px solid var(--color-accent-current);
  --border-hairline: 1px solid var(--color-line);
  --rule-gold:       3px solid var(--color-gold);

  /* ---- Elevation, ergonomics, motion ---- */
  --shadow-card:   0 2px 10px rgba(60, 48, 34, 0.12);   /* warm, soft — black halos read wrong on oatmeal */
  --shadow-raised: 0 8px 28px rgba(60, 48, 34, 0.16);
  --tap-min: 48px;             /* minimum hit target — structural, do not shrink */
  --motion-fast: 150ms ease-out;
  --motion-move: 250ms ease-in-out;
}

/* ---- Section themes: one line recolors a whole page ---- */
.theme-chaos    { --color-accent-current: var(--color-accent-chaos);    --color-soft-current: var(--color-soft-chaos); }
.theme-shadow   { --color-accent-current: var(--color-accent-shadow);   --color-soft-current: var(--color-soft-shadow); }
.theme-ultra    { --color-accent-current: var(--color-accent-ultra);    --color-soft-current: var(--color-soft-ultra); }
.theme-campaign { --color-accent-current: var(--color-accent-campaign); --color-soft-current: var(--color-soft-campaign); }
.theme-rules    { --color-accent-current: var(--color-accent-rules);    --color-soft-current: var(--color-soft-rules); }

/* ---- Motion never carries meaning; it only confirms taps ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-move: 0ms; }
}