/* Explain: Theme design tokens (colors, fonts) for consistent styling. */
:root {
    /* --- Surfaces --- */
    --background-color: #070b14;
    --bg-elevated: #0c1220;
    --surface-color: #111a2b;
    --surface-glass: rgba(255, 255, 255, 0.035);

    /* --- Brand --- */
    --primary-color: #22d3ee;
    --primary-hover: #06b6d4;
    --primary-soft: rgba(34, 211, 238, 0.12);
    --secondary-color: #6366f1;
    --bi-color-2: #f0447a;
    --bi-soft: rgba(240, 68, 122, 0.14);
    --gradient-bi: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 45%, var(--bi-color-2) 100%);

    /* --- Accent / states --- */
    --accent-color: #10b981;
    --accent-soft: rgba(16, 185, 129, 0.12);
    --danger-color: #f87171;

    /* --- Text --- */
    --text-color: #e8eef9;
    --text-muted: #8b97a8;
    --text-dim: #5b6675;

    /* --- Lines --- */
    --border-color: rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.3);

    /* --- Fonts --- */
    --font-heading: 'Rubik', sans-serif;
    --font-body: 'Heebo', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* --- Shape --- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    /* --- Effects --- */
    --shadow-glow: 0 0 60px rgba(34, 211, 238, 0.16);
    --shadow-deep: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
}