/* ═══════════════════════════════════════════
       DESIGN TOKENS
    ═══════════════════════════════════════════ */

/* Core design tokens: colours, typography, radii, easing curves. */
:root {
    --bg: #080c14;
    --surface: #0f1520;
    --surface2: #161e2e;
    --surface3: #1d2740;
    --border: rgba(255, 255, 255, 0.08);
    --border2: rgba(255, 255, 255, 0.14);

    --gold: #f5c842;
    --gold-dim: #c9a030;
    --blue: #4fa3e8;
    --green: #3dd68c;
    --red: #f46060;
    --purple: #a78bfa;
    --accent-primary: #00f2ff;
    --accent-secondary: #ffaa00;
    --accent-success: #00ffaa;


    --text: #eef2f8;
    --text-reverse: #0f1520;
    --text-muted: #7c8fa8;
    --text-dim: #4a5568;

    --font-display: 'Syne', sans-serif;
    --font-mono: 'Space Mono', monospace;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}