/* ============================================
   MortalPins design tokens
   One place for the colours and corner radii used by the site AND the game pages. Load this before any other
   stylesheet (Views/Shared/Main/_Styles.cshtml, _GameLayout.cshtml). New CSS should use these, not raw hex or px.
   ============================================ */

:root {
    /* The game's (Nexus) palette: near-black navy, cream text, gold hairlines and accents. Game pages use the
       same values as --nexus-* in css/game/nexus-online.css. */
    --mp-bg: #030208;
    --mp-surface: rgba(4, 9, 18, .78);
    --mp-surface-strong: rgba(4, 6, 24, .92);
    --mp-border: rgba(247, 211, 122, .25);
    --mp-border-strong: rgba(247, 211, 122, .6);
    --mp-text: #f8ead2;
    --mp-muted: rgba(248, 234, 210, .66);
    --mp-gold: #f7d37a;
    --mp-gold-soft: #fff4c7;
    --mp-gold-deep: #c89b3c;
    --mp-blue: #4cc9ff;
    --mp-purple: #7c3cff;
    --mp-pink: #ff5ea8;
    --mp-radius: var(--mp-r-lg);
    --mp-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .5);
    /* Cards inside panels, and their hover/active state */
    --mp-card: rgba(0, 0, 0, .35);
    --mp-card-hover: rgba(247, 211, 122, .08);
    --mp-glow: inset 0 0 3rem rgba(247, 211, 122, .04);

    /* Gold ramp and the dark ink used on gold buttons */
    --mp-gold-hi: #fff0a8;
    --mp-ink-on-gold: #130d02;

    /* Corner radii: small controls and chips, cards inside panels, panels. Pills use 999px. */
    --mp-r-sm: 12px;
    --mp-r-md: 16px;
    --mp-r-lg: 20px;
    --mp-r-pill: 999px;
}