/* ═══════════════════════════════════════════════════════════
   Alexander Design System — CSS Custom Properties
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ────────────────────────────────── */
    --color-primary:        hsl(225, 73%, 57%);
    --color-primary-light:  hsl(225, 73%, 67%);
    --color-primary-dark:   hsl(225, 73%, 42%);
    --color-primary-subtle: hsl(225, 73%, 95%);

    --color-accent:         hsl(160, 68%, 48%);
    --color-accent-light:   hsl(160, 68%, 58%);
    --color-accent-dark:    hsl(160, 68%, 36%);

    --color-warning:        hsl(38, 92%, 55%);
    --color-danger:         hsl(0, 72%, 55%);
    --color-success:        hsl(145, 63%, 45%);

    /* ── Neutrals ────────────────────────────────────── */
    --color-bg:             hsl(228, 24%, 6%);
    --color-bg-elevated:    hsl(228, 20%, 10%);
    --color-bg-card:        hsl(228, 18%, 13%);
    --color-bg-card-hover:  hsl(228, 18%, 16%);
    --color-bg-subtle:      hsl(228, 15%, 18%);

    --color-surface:        hsl(228, 14%, 20%);
    --color-border:         hsl(228, 12%, 22%);
    --color-border-subtle:  hsl(228, 10%, 16%);

    --color-text:           hsl(220, 20%, 94%);
    --color-text-secondary: hsl(220, 12%, 62%);
    --color-text-muted:     hsl(220, 10%, 45%);

    /* ── Gradients ───────────────────────────────────── */
    --gradient-primary:     linear-gradient(135deg, var(--color-primary), var(--color-accent));
    --gradient-hero:        linear-gradient(180deg, var(--color-bg) 0%, hsl(228, 24%, 4%) 100%);
    --gradient-card:        linear-gradient(135deg, var(--color-bg-card) 0%, hsl(228, 20%, 11%) 100%);
    --gradient-dark:        linear-gradient(180deg, hsl(228, 24%, 4%) 0%, var(--color-bg) 100%);

    /* ── Typography ──────────────────────────────────── */
    --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs:     0.75rem;
    --text-sm:     0.875rem;
    --text-base:   1rem;
    --text-lg:     1.125rem;
    --text-xl:     1.25rem;
    --text-2xl:    1.5rem;
    --text-3xl:    1.875rem;
    --text-4xl:    2.25rem;
    --text-5xl:    3rem;
    --text-6xl:    3.75rem;
    --text-7xl:    4.5rem;

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    /* ── Spacing ─────────────────────────────────────── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* ── Border Radius ───────────────────────────────── */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.25rem;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-sm:    0 1px 2px hsl(0 0% 0% / 0.3);
    --shadow-md:    0 4px 12px hsl(0 0% 0% / 0.3);
    --shadow-lg:    0 8px 30px hsl(0 0% 0% / 0.4);
    --shadow-xl:    0 16px 50px hsl(0 0% 0% / 0.5);
    --shadow-glow:  0 0 30px hsl(225 73% 57% / 0.15);

    /* ── Transitions ─────────────────────────────────── */
    --transition-fast:    150ms ease;
    --transition-base:    250ms ease;
    --transition-slow:    400ms ease;
    --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ──────────────────────────────────────── */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:   1024px;
    --container-xl:   1200px;
    --container-2xl:  1400px;
    --nav-height:     72px;

    /* ── Z-index ─────────────────────────────────────── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-nav:       300;
    --z-modal:     400;
    --z-toast:     500;
}