:root {
    /* ── Colors ── */
    --color-primary:        #2563eb;
    --color-primary-dark:   #1d4ed8;
    --color-primary-light:  #dbeafe;
    --color-success:        #16a34a;
    --color-success-bg:     #dcfce7;
    --color-danger:         #dc2626;
    --color-danger-bg:      #fee2e2;
    --color-warning:        #f59e0b;
    --color-warning-bg:     #fef3c7;

    /* ── Backgrounds ── */
    --bg-page:              #f0f4f8;
    --bg-card:              #ffffff;
    --bg-gradient:          linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #0ea5e9 100%);

    /* ── Text ── */
    --text-primary:         #1e293b;
    --text-secondary:       #64748b;
    --text-inverse:         #ffffff;

    /* ── Typography ── */
    --font-family:          'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-xs:         0.75rem;
    --font-size-sm:         0.85rem;
    --font-size-base:       1rem;
    --font-size-lg:         1.2rem;
    --font-size-xl:         1.5rem;
    --font-size-2xl:        2rem;
    --font-size-3xl:        3.5rem;
    --font-size-score:      4rem;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-bold:     700;
    --font-weight-black:    800;

    /* ── Spacing ── */
    --space-xs:             0.25rem;
    --space-sm:             0.5rem;
    --space-md:             1rem;
    --space-lg:             1.5rem;
    --space-xl:             2rem;
    --space-2xl:            2.5rem;

    /* ── Borders & Radii ── */
    --radius-sm:            8px;
    --radius-md:            12px;
    --radius-lg:            20px;

    /* ── Shadows ── */
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 4px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 8px 40px rgba(0, 0, 0, 0.20);

    /* ── Transitions ── */
    --transition-fast:      0.2s ease;
    --transition-normal:    0.3s ease;
}