/* ============================================================
 * Design tokens.
 * Keep all project-wide colors, spacing, typography, and effects here.
 * ============================================================ */

:root {
    /* ---- Color palette ---- */
    --color-cyan: #4fd1ff;
    --color-cyan-glow: #00bfff;
    --color-cyan-deep: #0099ff;
    --color-cyan-bright: #6fe3ff;
    --color-cyan-text: #b3e5ff;
    --color-cyan-light: #d7f4ff;

    --color-navy: #001a33;
    --color-navy-panel: rgba(0, 51, 102, 0.7);
    --color-navy-panel-muted: rgba(0, 51, 102, 0.6);
    --color-surface-light: rgba(255, 255, 255, 0.05);
    --color-surface-lighter: rgba(255, 255, 255, 0.1);

    --color-red: #ff4f4f;
    --color-red-glow: #ff0000;
    --color-red-glow-deep: #cc0000;

    /* ---- Semantic aliases ---- */
    --color-primary: var(--color-cyan);
    --color-primary-hover: var(--color-cyan-glow);
    --color-heading: var(--color-cyan-bright);
    --color-text: var(--color-cyan-text);
    --color-link: var(--color-cyan);

    /* ---- Spacing scale (4px base) ---- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* ---- Border radius ---- */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 20px;

    /* ---- Shadows ---- */
    --shadow-glow-sm: 0 0 25px var(--color-cyan-glow);
    --shadow-glow-md: 0 0 30px var(--color-cyan-glow);
    --shadow-text: 0 0 20px var(--color-cyan-glow);
    --shadow-text-title: 0 0 25px var(--color-cyan-glow), 0 0 10px var(--color-cyan-deep);
    --shadow-text-danger: 0 0 25px var(--color-red-glow), 0 0 10px var(--color-red-glow-deep);

    /* ---- Typography ---- */
    --font-display: 'Bubblegum Sans', sans-serif;

    /* ---- Motion ---- */
    --transition-base: all 0.3s ease;
}