:root {
/* COLORS */
    /* Backgrounds */
    --color-bg: #050b18;
    --color-surface: #091428;

    /* Brand */
    --color-primary: #1aa7ff;
    --color-secondary: #25d7ff;
    --color-third:#051741;

    /* Typography */
    --color-text: #f5f7ff;
    --color-muted: #9ca8c7;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-accent: rgba(26, 167, 255, 0.35);


    /* GRADIENTS */

    --gradient-primary:
        linear-gradient(
            135deg,
            var(--color-secondary),
            #246bff
        );

    --gradient-background:
        radial-gradient(
            circle at top right,
            rgba(21, 101, 255, 0.22),
            transparent 38%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(0, 179, 179, 0.12),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #040814,
            #07101f
        );


    /* TYPOGRAPHY */

    --font-primary:
        "Montserrat",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* FONT SIZES */

    --font-size-caption: 0.75rem;   /* 12px */
    --font-size-small: 0.875rem;    /* 14px */
    --font-size-body: 1rem;         /* 16px */
    --font-size-body-lg: 1.125rem;  /* 18px */

    --font-size-h4:
        clamp(1.25rem, 2vw, 1.5rem);

    --font-size-h3:
        clamp(1.75rem, 3vw, 2rem);

    --font-size-h2:
        clamp(2.5rem, 5vw, 3rem);

    --font-size-h1:
        clamp(3.5rem, 6vw, 4rem);

    --font-size-display:
        clamp(4rem, 7vw, 4.5rem);


    /* LINE HEIGHT */

    --line-height-tight: 1.1;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;


    /* SPACING SYSTEM */

    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-9: 6rem;     /* 96px */
    --space-10: 8rem;    /* 128px */


    /* PAGE LAYOUT */

    --container-width: 1200px;

    --page-padding: 24px;

    --section-spacing: var(--space-9);
    --section-spacing-large: var(--space-10);
    --section-spacing-compact: var(--space-8);


    /* CONTENT WIDTH */

    --content-width-text: 65ch;
    --content-width-hero: 600px;


    /* BORDER RADIUS */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;


    /* SHADOWS */

    --shadow-sm:
        0 8px 24px rgba(0, 0, 0, 0.16);

    --shadow-md:
        0 18px 50px rgba(0, 0, 0, 0.22);

    --shadow-lg:
        0 24px 60px rgba(0, 0, 0, 0.28);

    --shadow-glow:
        0 0 30px rgba(26, 167, 255, 0.10);


    /* TRANSITIONS */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;


    /* Z-INDEX */

    --z-base: 1;
    --z-dropdown: 10;
    --z-header: 100;
    --z-modal: 1000;

}