/* ── Design tokens ─────────────────────────────────────────────
   Single source of truth for the gold-noir brand. Load this file
   FIRST among the stylesheets so every other sheet can reference
   the custom properties below. Values here are the shared contract
   for both CSS and JS (rarity hexes mirror configEffects tiers). */

:root {
    /* Brand */
    --gold: #FFD700;
    --gold-soft: #FFE68A;

    /* Panel surface */
    --panel-grad-a: #1a1a2e;
    --panel-grad-b: #16213e;
    --panel-radius: 16px;
    --panel-border: 2px;
    --overlay-dim: rgba(0, 0, 0, 0.8);

    /* Rarity quintet (canonical hexes) */
    --rarity-common: #FFFFFF;
    --rarity-uncommon: #66BB6A;
    --rarity-rare: #1E90FF;
    --rarity-epic: #DA70D6;
    --rarity-legendary: #FFD700;

    /* Font roles */
    --font-display: Impact, 'Arial Black', sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-ui: 'Segoe UI', Arial, sans-serif;
    --font-mono: 'Courier New', monospace;

    /* Motion */
    --dur-fast: 0.18s;
    --dur-med: 0.32s;
    --dur-slow: 0.55s;
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}