/* ============================================================
   MY MONSTERS — Brand Kit V2 Tokens (overrides)
   Source: MY_MONSTERS_BRIEF_V2.md §3
   Loaded AFTER colors_and_type.css so these win.

   Strategy: declare the new official tokens (--brand-red, --white,
   product colors), and re-point legacy aliases (--paper, --blood,
   --bone, --surface, --bg) so existing components inherit the new
   palette without touching every selector.
   ============================================================ */

/* Brand Kit fonts — Zen Kaku Gothic New (Black 900), Noto Sans JP (400/500).
   VAG Rounded is commercial-only; we use a near-equivalent rounded geometric
   stack as fallback until license is procured.
   Cabin (Google Fonts) is the closest open analogue to VAG Rounded for the
   Latin display tier; it's geometric, slightly rounded, and pairs cleanly
   with Zen Kaku Gothic New. Swap to VAG Rounded by replacing this @import
   and the --font-en-display stack below. */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700;900&family=Cabin:wght@400;500;600;700&display=swap');

:root {
  /* ----- BRAND KIT CORE (official) ----------------------- */
  --brand-red:   #CC0000;        /* logo · taglines · accent (was --blood) */
  --ink:         #0A0A0A;        /* background base / dark */
  --white:       #FFFFFF;        /* text on dark · main surface */

  /* ----- PRODUCT WORLD COLORS ---------------------------- */
  --ase-color:   #CC0000;        /* A.S.E活 - 発汗・代謝・熱 (brand red) */
  --cho-color:   #F5F0EB;        /* C.H.O活 - 腸・生命・根本 (cream) */
  --min-color:   #7C3AED;        /* M.I.N活 - 夜・睡眠 (violet) */
  --hug-color:   #F4B8C8;        /* H.U.G活 - TBD placeholder (soft pink) */
  --tin-color:   #1E3A5F;        /* T.I.N活 - TBD placeholder (deep blue) */

  /* ----- LEGACY ALIAS REMAP ------------------------------ */
  /* Keep old token names alive but point them to the new palette so
     every existing rule that references --paper / --blood / --bone
     picks up the Brand Kit colors without an edit. */
  --paper:       var(--white);   /* main surface white */
  --bone:        #FAFAFA;        /* card-on-white */
  --blood:       var(--brand-red);
  --bg:          var(--white);
  --surface:     var(--white);
  --surface-2:  #F5F5F5;
  --fg:          var(--ink);
  --fg-inverse:  var(--white);
  --rule:        var(--ink);
  --rule-soft:   #E5E5E5;
  --fog:         #4A4A46;
  --smoke:       #8B8B85;
  --ash:         #C9C6C0;
  --accent:      var(--brand-red);

  /* ----- TYPE FAMILIES (Brand Kit) ----------------------- */
  /* English / numerals: VAG Rounded → Cabin fallback (rounded geometric) */
  --font-en-display: 'Cabin', 'VAG Rounded', 'Zen Kaku Gothic New', system-ui, sans-serif;
  /* Japanese heading: Zen Kaku Gothic New Black */
  --font-jp-display: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  /* Japanese body */
  --font-jp-body:    'Noto Sans JP', 'Zen Kaku Gothic New', system-ui, sans-serif;
  /* Mono kept for spec / SKU lines */
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Re-point the legacy semantic names used throughout the codebase.
     --font-display now means "English big shout" (Cabin/VAG, weight 700)
     --font-sans    now means "English UI / EN body"
     --font-jp      now means "JP body" (Noto Sans JP) — when we want
                    Zen Kaku for headings we use --font-jp-display directly. */
  --font-display: var(--font-en-display);
  --font-sans:    var(--font-en-display);
  --font-jp:      var(--font-jp-body);
}

/* ============================================================
   Global helpers — Brand-Kit-correct type defaults
   ============================================================ */
html, body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-jp-body);
}

/* English display tier — Cabin/VAG Rounded, weight 700 not 900
   (VAG Rounded ships Regular as its standard cut; Cabin 700 ~= VAG Bold) */
.font-en-display, .display-mega, .display-giant, .display-huge,
h1.font-display, h2.font-display, .font-display {
  font-family: var(--font-en-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Japanese heading — Zen Kaku Gothic New Black */
.font-jp-display, .h-jp, .jp-display {
  font-family: var(--font-jp-display);
  font-weight: 900;
  letter-spacing: 0.005em;
}

/* JP body */
.font-jp-body, p.jp, .jp-body {
  font-family: var(--font-jp-body);
  font-weight: 400;
}

/* ::selection — Brand Kit red */
::selection { background: var(--brand-red); color: var(--white); }