:root {
    --color-bg-primary: #050508;
    --color-bg-secondary: #0c0c10;
    --color-bg-card: #12121a;
    --color-border: rgba(255, 255, 255, 0.09);
    --color-heading: #FFFFFF;
    --color-text: #C8CDD6;
    --color-text-muted: #8B93A3;
    --color-accent: #E8EAEF;
    --color-glow-indigo: rgba(99, 102, 241, 0.35);
    --color-glow-violet: rgba(139, 92, 246, 0.28);
    --color-glow-blue: rgba(56, 189, 248, 0.18);

    --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius-card: 16px;
    --radius-btn: 10px;
    --radius-badge: 100px;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(99, 102, 241, 0.08);

    --transition-fast: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    --container-max: 1320px;
    --container-padding: clamp(1.25rem, 2.5vw, 2rem);
    --site-inset: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
    --section-spacing: 7rem;
    --header-height: 80px;
}

@media (max-width: 768px) {
    :root {
        --section-spacing: 5rem;
        --container-padding: 1.25rem;
        --header-height: 64px;
    }
}