/*==================================================
    MONSNATCH BRAND TOKENS — single source of truth
    Aligned to "Monsnatch Brand Manual" v1.0 (2026) — all values confirmed
    from the PDF (Colors, pp.19–20). Consumed by global.css (website) and
    mirrored in cms/src/app/globals.css + lib/elements.ts (ELEMENT_HEX).
    ponytail: one canonical :root; do not duplicate hex anywhere else.
==================================================*/
:root {
  /* --- Core palette (v1.0 2026): 4 colours — Gold leads, Indigo grounds,
         Sky supports, Cream breathes. Balance ≈ Gold 60 / Cream 18 / Sky 12 / Indigo 10 --- */
  --brand-gold:   #f9cc48; /* Momon Gold — PRIMARY, lead ~60%. Pantone 7549 C (v1.0 2026, confirmed) */
  --brand-indigo: #005494; /* Deep Indigo — GROUNDS & TEXT. Pantone 2745 C */
  --brand-sky:    #7FB1EB; /* Team Sky — SECONDARY / community. Pantone 283 C */
  --brand-cream:  #FFF8EA; /* Cream White (Paper) — CANVAS / breathe */
  --brand-white:  #FFFFFF; /* Pure white */

  /* legacy neutrals — NOT in the v1.0 4-core; kept only as functional shades */
  --brand-amber:  color-mix(in srgb, var(--brand-gold) 80%, #000); /* gold-dark, for button hover (amber dropped) */
  --brand-sand:   #F1E4C8; /* soft fill (warm) — non-core */
  --brand-gray:   #6E5F44; /* caption/muted (warm) — non-core */

  /* --- Semantic roles (consume THESE in components, not the raw colors) --- */
  --brand-primary:      var(--brand-gold);
  --brand-on-primary:   var(--brand-indigo); /* RULE: never white text on gold — always indigo */
  --brand-secondary:    var(--brand-sky);
  --brand-surface:      var(--brand-cream);
  --brand-surface-soft: var(--brand-sand);
  --brand-text:         var(--brand-indigo);
  --brand-text-muted:   var(--brand-gray);
  --brand-accent:       var(--brand-indigo); /* accent text (was amber; indigo per v1.0) */
  --brand-ink:          var(--brand-indigo); /* legacy alias → Deep Indigo (was Warm Ink #241B0C) */

  /* --- The twelve elements (v1.0 2026, Colors p.20) — gameplay palette only,
         NOT a substitute for core brand colors. Names canonical. --- */
  --el-earth:   #885F4F;
  --el-water:   #2E8BE6;
  --el-air:     #54C1A8; /* was "wind" in code — canonical name is Air */
  --el-fire:    #BD1E38;
  --el-thunder: #F6B81F;
  --el-ice:     #79CDEE;
  --el-nature:  #22832F;
  --el-poison:  #9B4FD1;
  --el-metal:   #8A97AB;
  --el-spirit:  #4B4E3F;
  --el-light:   #FFF9E0;
  --el-dark:    #2A2A2A;

  /* --- Typography (§07) — Opun Mai, already self-hosted in global.css --- */
  --brand-font:       "Opun Mai", sans-serif;
  --brand-fw-display: 900; /* Black  — headlines, big numbers, short statements */
  --brand-fw-heading: 700; /* Bold   — headings */
  --brand-fw-emph:    500; /* Medium — gentle emphasis */
  --brand-fw-body:    400; /* Regular— paragraphs / UI */
  --brand-fw-light:   300; /* Light  — large quiet text */
}