:root {
    /* ── v4 Core palette ── */
    --midnight-ink:    #202020;
    --muted-ash:       #333333;
    --ash-2:           #5a5a5a;
    --cloud-canvas:    #f5f5f5;
    --cloud-2:         #efeef7;
    --paper-white:     #ffffff;
    --ghost-border:    #ebe9f4;
    --ghost-2:         #e3e0f0;
    --electric-violet: #5757f8;
    --violet-soft:     #eeeefe;
    --violet-deep:     #4444e5;

    /* ── Aurora pastels ── */
    --aur-violet:  #a99cff;
    --aur-blue:    #8ec6ff;
    --aur-teal:    #8be6d4;
    --aur-magenta: #ffa6da;
    --aur-amber:   #ffd29a;

    /* ── Glass primitives ── */
    --glass:       rgba(255,255,255,0.55);
    --glass-2:     rgba(255,255,255,0.70);
    --glass-edge:  rgba(255,255,255,0.85);
    --hairline:    rgba(32,32,32,0.06);
    --hairline-2:  rgba(32,32,32,0.10);

    /* ── Legacy brand (kept for existing components) ── */
    --color-navy:        #0c1754;
    --color-navy-dark:   #080f3d;
    --color-brand:       #5757f8;
    --color-brand-hover: #4444e5;
    --color-lilac:       #d9d4ff;
    --color-lilac-dark:  #b8b0f5;
    --color-gray-light:  #eaebf8;
    --color-gray-border: #cccccc;
    --color-off-white:   #f5f5f5;
    --color-white:       #ffffff;
    --color-black:       #202020;
    --color-gray-medium: #5a5a5a;
    --color-gray-subtle: #6b7280;
    --color-success:     #10b981;

    /* ── Gradients ── */
    --gradient-brand:     linear-gradient(110deg, #5757f8 0%, #7e7afe 40%, #4ab0ff 70%, #34d5b8 100%);
    --gradient-hero-blob: radial-gradient(ellipse at 70% 50%, rgba(87,87,248,0.12) 0%, rgba(74,176,255,0.10) 50%, transparent 70%);
    --gradient-navy:      linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
    --gradient-btn:       linear-gradient(110deg, #5757f8 0%, #7e7afe 60%, #4ab0ff 100%);
    --gradient-text:      linear-gradient(110deg, #5757f8 0%, #4ab0ff 60%, #34d5b8 100%);

    /* ── Glow shadows ── */
    --shadow-glow-btn:  0 8px 24px -10px rgba(87,87,248,0.55), inset 0 0 0 1px rgba(255,255,255,0.18);
    --shadow-glow-card: 0 0 0 1px rgba(87,87,248,0.10), 0 30px 80px -40px rgba(60,40,180,0.18);

    /* ── Typography ── */
    --font-display:  "Montserrat", ui-sans-serif, system-ui, sans-serif;
    --font-primary:  "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono:     "JetBrains Mono", ui-monospace, monospace;
    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-semibold: 600;
    --font-weight-bold:    700;

    --fs-caption:     0.6875rem;  /* 11px */
    --fs-body-sm:     0.8125rem;  /* 13px */
    --fs-body:        1rem;       /* 16px */
    --fs-subheading:  1.125rem;   /* 18px */
    --fs-heading-sm:  1.5rem;     /* 24px */
    --fs-heading:     2rem;       /* 32px */
    --fs-heading-lg:  clamp(2.125rem, 4.5vw, 3.5rem);
    --fs-display:     clamp(2.25rem, 6vw, 4rem);
    --fs-display-lg:  clamp(2.75rem, 8.4vw, 7.5rem);

    --lh-tight:   0.95;
    --lh-snug:    1.1;
    --lh-normal:  1.3;
    --lh-relaxed: 1.55;

    /* ── Spacing ── */
    --space-1:    0.5rem;
    --space-2:    1rem;
    --space-3:    1.5rem;
    --space-4:    2rem;
    --space-5:    2.5rem;
    --space-6:    3rem;
    --space-7:    3.5rem;
    --space-8:    4rem;
    --space-10:   5rem;
    --space-16:   8rem;
    --section-gap: clamp(72px, 9vw, 112px);

    /* ── Border radius ── */
    --r-sm:     10px;
    --r-md:     14px;
    --r-lg:     20px;
    --r-xl:     28px;
    --r-pill:   1425.6px;
    --radius-sm:     10px;
    --radius-card:   20px;
    --radius-badge:  1425.6px;
    --radius-button: 1425.6px;

    /* ── Shadows ── */
    --shadow-card:       0 1px 0 rgba(32,32,32,0.04), 0 30px 80px -40px rgba(60,40,180,0.18);
    --shadow-card-hover: 0 1px 0 rgba(32,32,32,0.06), 0 40px 100px -40px rgba(60,40,180,0.28);
    --shadow-navbar:     inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 40px -22px rgba(60,40,180,0.18);

    /* ── Layout ── */
    --container-max:     1320px;
    --container-padding: clamp(20px, 4vw, 56px);
    --navbar-height:     72px;

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 380ms ease;
}

@media (max-width: 768px) {
    :root {
        --section-gap: clamp(56px, 7vw, 80px);
    }
}