/* =====================================================================
   codex · base tokens
   Shared by every game theme. Themes never edit this file; they only
   fill the semantic colour slots and the theme slots at the bottom.
   ===================================================================== */
:root, .codex {
  /* ---- spacing (4 px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --page-max: 1360px;
  --page-gutter: 40px;
  --grid-min: 300px;
  --grid-gap: 10px;

  /* ---- type ---- */
  --font-ui: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-ui);              /* themes override */
  --fs-micro: 12px;     /* small caps labels, triggers          */
  --fs-xs: 13px;         /* tags line, meta                       */
  --fs-sm: 15px;        /* card body, chips                      */
  --fs-md: 16.5px;      /* overlay body                          */
  --fs-lg: 20px;        /* card name (display)                   */
  --fs-xl: 25px;        /* section titles                        */
  --fs-2xl: 36px;       /* page title                            */
  --fs-3xl: 46px;       /* overlay name                          */
  --lh-tight: 1.15;
  --lh-body: 1.45;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-caps: .12em;
  --tracking-display: .01em;
  --num-figures: tabular-nums lining-nums;

  /* ---- radii ---- */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 10px 24px -10px rgba(0,0,0,.7);
  --shadow-3: 0 30px 80px -20px rgba(0,0,0,.85);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,0,.3,1);
  --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms;
  --lift: -2px;

  /* ---- layers ---- */
  --z-sticky: 20; --z-overlay: 50; --z-sheet: 60;

  /* ---- icon sizes (1:1 slots) ---- */
  --icon-xs: 14px; --icon-sm: 20px; --icon-md: 20px; --icon-lg: 26px;

  /* =================================================================
     STAT COLOURS — fixed by game data, identical in every theme.
     ================================================================= */
  --stat-health: #6dc042;
  --stat-damage: #ff353b;
  --stat-burn: #ff8400;
  --stat-frost: #3fcfff;
  --stat-poison: #d421ee;
  --stat-armor: #6bc0de;
  --stat-crit: #ff353b;
  --stat-speed: #7fffd4;
  --stat-range: #7fffd4;
  --stat-healing: #6dc042;
  --stat-regen: #40e595;
  --stat-ward: #eedd82;
  --stat-cleave: #ff353b;
  --stat-thorns: #afc051;
  --stat-krowns: #dcae32;
  --stat-lore: #00bbff;

  /* ---- rarity: base hue + "ink" lightened for text on dark panels ---- */
  --rarity-common: #5d646f;     --rarity-common-ink: #a3abb6;
  --rarity-uncommon: #3f9e55;   --rarity-uncommon-ink: #74d48c;
  --rarity-rare: #2f78d6;       --rarity-rare-ink: #7ab8ff;
  --rarity-epic: #9150d8;       --rarity-epic-ink: #c79bff;
  --rarity-legendary: #e0902a;  --rarity-legendary-ink: #ffbe66;
  --rarity-clan: #b8384a;       --rarity-clan-ink: #ff8796;      /* not a rarity: clan-only structures */
  --rarity-special: #2a9d9a;    --rarity-special-ink: #6fe3dc;   /* not a rarity: TRANSFORM-only structures */

  /* =================================================================
     SEMANTIC COLOUR SLOTS — a theme fills these. Neutral dark defaults
     so the base renders on its own; a light mode redefines only these.
     ================================================================= */
  --color-bg: #0e1013;
  --color-bg-2: #15181d;
  --color-surface: #1b1f25;
  --color-surface-raised: #222831;
  --color-surface-inset: #0b0d10;   /* stat-chip ground: poison/damage ≥ 4.5:1 */
  --color-text: #e8ebef;
  --color-text-dim: #a4adb8;
  --color-text-faint: #8a94a0;
  --color-border: rgba(255,255,255,.12);
  --color-border-strong: rgba(255,255,255,.28);
  --color-line: rgba(255,255,255,.4);        /* hairlines, dividers */
  --color-accent: #e3b65c;                   /* trigger labels, active state */
  --color-accent-ink: #1a1206;               /* text on accent fills */
  --color-focus: #8fd3ff;
  --color-buff: #7fd36b;
  --color-nerf: #ff6b6b;
  --color-scrim: rgba(0,0,0,.7);

  /* =================================================================
     THEME SLOTS — the only places a theme brings its own assets.
     ================================================================= */
  --slot-panel-texture: none;                       /* background layer on panels   */
  --slot-frame-border: 1px solid var(--color-border);
  --slot-frame-shadow: none;                        /* inner bevel / glow of panels */
  --slot-ornament: none;                            /* divider centre ornament      */
  --slot-banner-mask: none;                         /* cloth edge for banners       */
  --slot-banner-stripe: transparent;                /* pinstripe colour on banners  */
  --slot-icon-shape: inset(0 round var(--radius-md)); /* clip of structure icons    */
  --slot-icon-ratio: 1;                             /* icon width ÷ height          */
  --slot-icon-frame: none;                          /* MASK of the outer band       */
  --slot-icon-frame-paint: transparent;             /* paint of the outer band      */
  --slot-icon-frame-inner: none;                    /* MASK of the inner rim        */
  --slot-icon-frame-inner-paint: transparent;       /* paint of the inner rim       */
  --slot-atmosphere: none;                          /* page background, own art     */
  --slot-grain: none;                               /* painterly grain overlay      */
  --slot-keyart: none;                              /* OPT-IN game key art; add-on  */
}
