:root {
    /* ── Core Palette ── */
    --color-bg:               #ffffff;
    --color-bg-secondary:     #f4f8ff;
    --color-bg-tertiary:      #eaf2ff;
    --color-bg-card:          #ffffff;

    --color-gradient-start:   #1e90ff;
    --color-gradient-end:     #00cfff;

    /* Text — dark on light */
    --color-text:             #0f172a;
    --color-text-muted:       #4a5568;
    --color-text-dim:         #718096;
    --color-text-inverse:     #ffffff;

    /* Borders */
    --color-border:           #dce8f8;
    --color-border-light:     #e8f0fb;

    /* Accent & status */
    --color-accent:           #1e90ff;
    --color-success:          #16a34a;
    --color-error:            #dc2626;
    --color-warning:          #d97706;

    /* ── Gradients ── */
    --gradient-brand:    linear-gradient(135deg, #1e90ff, #00cfff);
    --gradient-brand-r:  linear-gradient(135deg, #00cfff, #1e90ff);
    --gradient-hero:     linear-gradient(160deg, #eaf4ff 0%, #f0f9ff 50%, #ffffff 100%);
    --gradient-card:     linear-gradient(145deg, #ffffff, #f4f8ff);
    --gradient-text:     linear-gradient(135deg, #1e90ff, #00cfff);

    /* ── Spacing Scale ── */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* ── Border Radius ── */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Box Shadows (lighter, blue-tinted) ── */
    --shadow-sm:      0 1px 3px rgba(30, 90, 180, 0.08), 0 1px 2px rgba(30, 90, 180, 0.05);
    --shadow-md:      0 4px 12px rgba(30, 90, 180, 0.10), 0 2px 4px rgba(30, 90, 180, 0.06);
    --shadow-lg:      0 10px 24px rgba(30, 90, 180, 0.12), 0 4px 8px rgba(30, 90, 180, 0.08);
    --shadow-xl:      0 20px 40px rgba(30, 90, 180, 0.14);
    --shadow-glow:    0 4px 20px rgba(30, 144, 255, 0.22);
    --shadow-glow-lg: 0 8px 40px rgba(30, 144, 255, 0.28);
    --shadow-card:    0 2px 12px rgba(30, 90, 180, 0.08), 0 0 0 1px rgba(220, 232, 248, 1);

    /* ── Typography ── */
    --font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  1.875rem;   /* 30px */
    --font-size-4xl:  2.25rem;    /* 36px */
    --font-size-5xl:  3rem;       /* 48px */
    --font-size-6xl:  3.75rem;    /* 60px */

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    --line-height-tight:   1.25;
    --line-height-snug:    1.375;
    --line-height-normal:  1.6;
    --line-height-relaxed: 1.75;

    /* ── Transitions ── */
    --transition-base:   all 150ms ease;
    --transition-fast:   all 100ms ease;
    --transition-slow:   all 300ms ease;
    --transition-color:  color 150ms ease, background-color 150ms ease, border-color 150ms ease;

    /* ── Z-Index ── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-overlay: 100;
    --z-nav:    1000;
    --z-modal:  2000;
    --z-toast:  3000;
}