:root {
    /* ── Typography ────────────────────────────────────────────────────── */
    --font-display: 'Rajdhani', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* ── Brand Colors ──────────────────────────────────────────────────── */
    --color-primary: #00d4aa;
    --color-primary-light: rgba(0, 212, 170, 0.12);
    --color-primary-dark: #00a885;
    --color-accent: #818cf8;
    --color-accent-light: rgba(129, 140, 248, 0.12);

    /* ── Level Colors ──────────────────────────────────────────────────── */
    --level-1-color: #78909C;
    --level-2-color: #CD7F32;
    --level-3-color: #B0BEC5;
    --level-4-color: #FFD700;
    --level-5-color: #B388FF;

    /* ── Rank Colors ───────────────────────────────────────────────────── */
    --rank-1-color: #FFD700;
    --rank-2-color: #B0BEC5;
    --rank-3-color: #CD7F32;

    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --bg-page: #080c16;
    --bg-card: #0f1628;
    --bg-card-hover: #151e33;
    --bg-nav: #0a0f1e;
    --bg-input: #111a2e;
    --border-subtle: rgba(129, 140, 248, 0.1);
    --border-mid: rgba(129, 140, 248, 0.2);

    /* ── Text ──────────────────────────────────────────────────────────── */
    --text-primary: #e2e8f0;
    --text-secondary: rgba(226, 232, 240, 0.5);
    --text-muted: rgba(226, 232, 240, 0.3);

    /* ── Semantic ──────────────────────────────────────────────────────── */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* ── Gradients ─────────────────────────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #00d4aa, #00e5bf);
    --gradient-sidebar: linear-gradient(180deg, #070b18 0%, #0d1229 50%, #070b18 100%);
    --gradient-btn: linear-gradient(135deg, #00d4aa, #00e5bf, #00d4aa);
    --gradient-progress: linear-gradient(90deg, #00a885, #00d4aa, #00e5bf, #00d4aa);
    --gradient-page: radial-gradient(ellipse at 20% 0%, rgba(129, 140, 248, 0.06) 0%, transparent 60%),
                     radial-gradient(ellipse at 80% 100%, rgba(0, 212, 170, 0.04) 0%, transparent 60%);

    /* ── Glass ─────────────────────────────────────────────────────────── */
    --glass-bg: rgba(15, 22, 40, 0.8);
    --glass-border: 1px solid rgba(129, 140, 248, 0.12);
    --glass-blur: 16px;

    /* ── Shadows ────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 212, 170, 0.25);
    --shadow-glow-accent: 0 0 20px rgba(129, 140, 248, 0.2);

    /* ── Rank Glows ────────────────────────────────────────────────────── */
    --glow-gold: 0 0 14px rgba(255, 215, 0, 0.5);
    --glow-silver: 0 0 14px rgba(176, 190, 197, 0.4);
    --glow-bronze: 0 0 14px rgba(205, 127, 50, 0.5);

    /* ── Timing ─────────────────────────────────────────────────────────── */
    --transition-fast: 0.15s;
    --transition-smooth: 0.3s;
    --transition-spring: 0.4s;

    /* ── Radius ─────────────────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}