/* ============================================================
   AI Plays Games — Central Brand Tokens
   ============================================================
   SINGLE SOURCE OF TRUTH for color, surface, accent, and geometry tokens
   used by every public surface in this repo:
     - aiplaysgames.com  (site/)
     - aiju.gg           (aiju-site/)
     - donation pages    (stream/tip_platform/, served by tip-platform Vercel)

   ─────────────────────────────────────────────────────────────────────────
   UNBREAKABLE RULE FOR ALL FUTURE AGENTS — see AGENTS.md "PINNED RULE #3".
   ─────────────────────────────────────────────────────────────────────────
   1. NEVER hard-code a color hex, rgba(), or pixel radius in any other CSS
      file. Use the tokens declared here.
   2. Need a color/radius/surface that doesn't exist? ADD IT HERE first,
      with a comment naming where it's used, then reference the new token
      from your CSS. Token naming follows the patterns below.
   3. Per-brand differences (US vs CN) belong in the `body.brand-<id>`
      override blocks at the bottom of this file. Add new brands the same
      way — never branch by hard-coding values in site stylesheets.
   4. Typography (font-family) is intentionally NOT centralized here. Each
      site loads its own Google Fonts (Poppins/Gaegu for US, Noto Sans
      SC/ZCOOL KuaiLe for CN, system-ui on the donation page) because the
      typographic personality is part of the per-surface brief. Colors,
      surfaces, and geometry MUST be uniform across all surfaces.
   ─────────────────────────────────────────────────────────────────────────

   How this file gets to all three sites:
     - It lives physically at public/static/brand.css inside the
       tip-platform Vercel deploy.
     - site/vercel.json and aiju-site/vercel.json rewrite /static/* to the
       tip-platform deploy, so <link href="/static/brand.css"> works
       transparently from aiplaysgames.com and aiju.gg too.
     - The donation page templates also load it from /static/brand.css.
     - Every page that loads brand.css MUST load it BEFORE its own
       style.css so per-page rules can override / consume the tokens.
   ============================================================ */

:root {
  /* ---- Surfaces ---------------------------------------------------------
     Solid panel colors used on cards, fieldsets, inputs, modals.
     Slate-blue-tinted dark; matches the KickBot-reference donation page. */
  --bg:                    #0b0f14;     /* page background */
  --bg-grid:               #131821;     /* subtle gridded backdrop overlay */
  --bg-stream:             #000000;     /* video player bezel (intentional pure black) */
  --panel:                 #141b24;     /* card / fieldset background */
  --panel-2:               #1a222c;     /* nested surface (inputs, sub-cards) */
  --panel-hover:           #212a36;     /* card hover state */
  --panel-stroke:          #242d3a;     /* card / input borders */
  --panel-stroke-strong:   #323d4d;     /* heavier dividers */

  /* ---- Translucent neutrals ---------------------------------------------
     For chrome on top of dark backgrounds (top bars, soft buttons, hover
     surfaces, hairlines). Use these instead of rgba(255,255,255,0.0X). */
  --surface-soft:          color-mix(in srgb, #ffffff 6%, transparent);
  --surface-soft-hover:    color-mix(in srgb, #ffffff 12%, transparent);
  --hairline:              color-mix(in srgb, #ffffff 6%, transparent);
  --hairline-strong:       color-mix(in srgb, #ffffff 9%, transparent);
  --bg-overlay:            color-mix(in srgb, var(--bg) 85%, transparent);

  /* ---- Text ------------------------------------------------------------- */
  --text:                  #eef2f7;     /* primary text */
  --text-muted:            #8b96a6;     /* descriptions, captions, legend hints */
  --text-dim:              #b8b8b8;     /* between muted and primary */

  /* ---- Brand accent -----------------------------------------------------
     Default = US (aiplaysgames green). CN brand overrides via the
     body.brand-aiju block below. Keep these synced with
     stream/tip_platform/config/streams.yaml::brands.<id>.accent_color. */
  --accent:                #9be566;     /* aiplaysgames green */
  --accent-ink:            #0b0f14;     /* legible text on solid --accent */
  --accent-soft:           color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-soft-hover:     color-mix(in srgb, var(--accent) 85%, transparent);
  --accent-hairline:       color-mix(in srgb, var(--accent) 18%, transparent);

  /* ---- Status ----------------------------------------------------------- */
  --danger:                #f27272;     /* error toasts, validation */

  /* ---- Geometry --------------------------------------------------------- */
  --radius-sm:             6px;         /* inputs, pills, small buttons */
  --radius:                10px;        /* cards, fieldsets */
  --radius-lg:             12px;        /* large feature cards */
}

/* ============================================================
   Per-brand overrides
   ============================================================
   Apply by setting <body class="brand-<id>"> in the page that loads this
   file. The donation page templates (tip.html, thanks.html) already do
   this from streams.yaml::brand.id; aiju.gg's landing page sets it
   directly; aiplaysgames.com uses the :root defaults (no class needed).

   Adding a new brand:
     1. Append a `body.brand-<id>` block below.
     2. Add the matching brand entry under `brands:` in
        stream/tip_platform/config/streams.yaml.
     3. Keep the accent_color in streams.yaml in sync with --accent here.
   ============================================================ */

body.brand-aiju, .brand-aiju {
  --accent:                #e53935;     /* AI 局 red, per cn-reference brand voice */
  --accent-ink:            #ffffff;     /* white reads better on red than dark slate */
}


/* ============================================================
   Brand icon system
   ============================================================
   Mask-based monochrome icons that inherit `currentColor`. The SVG
   files at /icons/<name>.svg were normalized so they paint as a
   single shape; we re-tint them via `mask-image` so a single asset
   can render in any context (white on dark cards, accent-colored
   on hover, brand-orange for Anthropic, etc.).

   Why mask-image and not <img>? `<img>` SVGs ignore the parent's
   `color`, so we can't restyle them per-context. Mask-image makes
   the icon a coloured silhouette of the SVG's union-of-paths,
   which is exactly what we want for square brand marks.

   Usage:
     <span class="brand-icon" data-icon="claude" aria-hidden="true"></span>
       <h2 class="card-title">Claude plays Kerbal Space Program</h2>

   Icon names map 1:1 to the file under public/icons/. Add a new
   icon by (a) dropping a square SVG into public/icons/<name>.svg
   (currentColor fills, see public/icons/_normalize.py), and
   (b) appending a `[data-icon="<name>"]` rule below.

   Add a brand-color override (e.g. Anthropic's rust orange) by
   declaring `color: <hex>` on that rule — `currentColor` flowing
   into the mask paints the icon in that hue. ALL these hexes are
   official brand colors and are the only place in this file
   allowed to bypass the token system, since they ARE the tokens
   for those brands.
   ============================================================ */

.brand-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask-image: var(--brand-icon-url, none);
          mask-image: var(--brand-icon-url, none);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* AI / model marks ---------------------------------------------------- */
.brand-icon[data-icon="claude"]    { --brand-icon-url: url("/icons/claude.svg");    color: #d97757; }
.brand-icon[data-icon="chatgpt"]   { --brand-icon-url: url("/icons/chatgpt.svg");   color: var(--text); }
.brand-icon[data-icon="kimi"]      { --brand-icon-url: url("/icons/kimi.svg");      color: var(--text); }

/* Game / show marks --------------------------------------------------- */
.brand-icon[data-icon="ksp"]              { --brand-icon-url: url("/icons/ksp.svg");              color: var(--text); }
.brand-icon[data-icon="stardew"]          { --brand-icon-url: url("/icons/stardew.svg");          color: #f0c20a; } /* Stardew sprig yellow */
.brand-icon[data-icon="football-manager"] { --brand-icon-url: url("/icons/football-manager.svg"); color: var(--text); }
.brand-icon[data-icon="factorio"]         { --brand-icon-url: url("/icons/factorio.svg");         color: #ff8c1a; } /* Factorio orange */
.brand-icon[data-icon="chess"]            { --brand-icon-url: url("/icons/chess.svg");            color: var(--text); }
.brand-icon[data-icon="just-chatting"]    { --brand-icon-url: url("/icons/just-chatting.svg");    color: var(--text); }
.brand-icon[data-icon="chinese-parents"]  { --brand-icon-url: url("/icons/chinese-parents.svg");  color: var(--text); }
.brand-icon[data-icon="go"]               { --brand-icon-url: url("/icons/go.svg");               color: var(--text); }

/* Sizing modifiers --------------------------------------------------- */
.brand-icon--lg { width: 1.4em;  height: 1.4em;  vertical-align: -0.32em; }
.brand-icon--xl { width: 28px;   height: 28px;   vertical-align: middle; }  /* fits inside 44px stream-head avatar */