:root {
    --oy-bg: #f8f7f3;
    --oy-surface: #ffffff;
    --oy-surface-soft: #f2f0ea;
    --oy-text: #171821;
    --oy-text-soft: #606474;

    --oy-midnight: #09111f;
    --oy-midnight-2: #11182b;

    --oy-violet: #7c3aed;
    --oy-purple: #9333ea;
    --oy-blue: #2563eb;
    --oy-electric: #3b82f6;
    --oy-cyan: #06b6d4;

    --oy-border: rgba(21, 24, 34, 0.10);
    --oy-border-strong: rgba(21, 24, 34, 0.16);
    --oy-border-inverse: rgba(248, 247, 243, 0.12);

    --oy-ivory-ink: #2a2438;
    --oy-header: rgba(248, 247, 243, 0.82);
    --oy-header-scrolled: rgba(248, 247, 243, 0.94);

    --oy-grad-accent: linear-gradient(120deg, var(--oy-violet) 0%, var(--oy-blue) 100%);
    --oy-grad-cta: linear-gradient(115deg, #6d28d9 0%, #2563eb 58%, #1d4ed8 100%);
    --oy-grad-midnight: linear-gradient(165deg, #09111f 0%, #141c32 52%, #0c1426 100%);
    --oy-grad-text: linear-gradient(110deg, #7c3aed 0%, #2563eb 70%, #3b82f6 100%);

    --oy-font-display: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --oy-font-body: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --oy-fw-regular: 400;
    --oy-fw-medium: 500;
    --oy-fw-semibold: 600;
    --oy-fw-bold: 700;

    --oy-fs-xs: 0.75rem;
    --oy-fs-sm: 0.875rem;
    --oy-fs-md: 1rem;
    --oy-fs-lg: 1.125rem;
    --oy-fs-xl: 1.25rem;
    --oy-fs-2xl: clamp(1.45rem, 1.1vw + 1.1rem, 1.85rem);
    --oy-fs-3xl: clamp(1.85rem, 1.8vw + 1.15rem, 2.55rem);
    --oy-fs-4xl: clamp(2.25rem, 3.4vw + 1rem, 3.65rem);

    --oy-lh-display: 1.14;
    --oy-lh-snug: 1.32;
    --oy-lh-body: 1.7;

    --oy-track-wide: 0.16em;
    --oy-track-display: -0.02em;

    --oy-space-1: 0.25rem;
    --oy-space-2: 0.5rem;
    --oy-space-3: 0.75rem;
    --oy-space-4: 1rem;
    --oy-space-5: 1.25rem;
    --oy-space-6: 1.5rem;
    --oy-space-8: 2rem;
    --oy-space-10: 2.5rem;
    --oy-space-12: 3rem;
    --oy-space-16: 4rem;
    --oy-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --oy-section: clamp(5rem, 9vw, 8.25rem);

    --oy-container: 80rem;
    --oy-radius-sm: 10px;
    --oy-radius-md: 16px;
    --oy-radius-lg: 26px;
    --oy-radius-xl: 34px;

    --oy-shadow-soft: 0 18px 40px rgba(23, 24, 33, 0.06);
    --oy-shadow-glass: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.22);

    --oy-ease: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --oy-header-height: 4.9rem;

    --oy-z-header: 80;
    --oy-z-nav: 90;
    --oy-z-backdrop: 85;
}

/*
    Breakpoints used in responsive.css:
    1280px condensed desktop
    1100px mobile navigation
    900px tablet
    768px large mobile
    640px mobile
    480px small mobile
    390px compact
*/