:root {
    color-scheme: light;

    --jv-navy: #263773;
    --jv-navy-deep: #1a2754;
    --jv-navy-ink: #0e1838;
    --jv-mint: #90d0ba;
    --jv-mint-strong: #6bbf9f;
    --jv-mint-soft: #eef8f4;

    --jv-canvas: #ffffff;
    --jv-canvas-soft: #f6f8fb;
    --jv-canvas-muted: #fafbfd;
    --jv-surface: #ffffff;
    --jv-ink: #1b2033;
    --jv-ink-soft: #4a5268;
    --jv-ink-mute: #5b6378;
    --jv-border: #e4e8f0;
    --jv-border-strong: #d3d9e6;
    --jv-success: #059669;
    --jv-success-bg: #ecfdf5;
    --jv-warning: #d97706;
    --jv-danger: #dc2626;

    --jv-glass: rgba(255, 255, 255, 0.72);
    --jv-glass-border: rgba(38, 55, 115, 0.12);
    --jv-line: rgba(38, 55, 115, 0.14);

    --jv-font-display: "Manrope", "Inter", system-ui, sans-serif;
    --jv-font-body: "Inter", "Manrope", system-ui, sans-serif;
    --jv-font-mono: "JetBrains Mono", ui-monospace, monospace;

    --jv-wrap: 1440px;
    --jv-gutter: 40px;
    --jv-header-h: 78px;
    --jv-topbar-h: 34px;

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

    --jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --jv-shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
    --jv-shadow-lg: 0 16px 36px -6px rgba(15, 23, 42, 0.12);
    --jv-shadow-glow: 0 18px 50px -12px rgba(38, 55, 115, 0.25);
    --jv-shadow-card: 0 22px 44px -26px rgba(38, 55, 115, 0.45);

    --jv-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --jv-speed: 240ms;
}

html.dark {
    color-scheme: dark;

    --jv-canvas: #0b1220;
    --jv-canvas-soft: #0f172a;
    --jv-canvas-muted: #0d1526;
    --jv-surface: #111a2e;
    --jv-ink: #f1f5f9;
    --jv-ink-soft: #cbd5e1;
    --jv-ink-mute: #94a3b8;
    --jv-border: rgba(144, 208, 186, 0.16);
    --jv-border-strong: rgba(144, 208, 186, 0.28);
    --jv-mint-soft: rgba(144, 208, 186, 0.1);

    --jv-glass: rgba(11, 18, 32, 0.7);
    --jv-glass-border: rgba(144, 208, 186, 0.16);
    --jv-line: rgba(144, 208, 186, 0.16);

    --jv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --jv-shadow-md: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
    --jv-shadow-lg: 0 18px 44px -8px rgba(0, 0, 0, 0.55);
    --jv-shadow-glow: 0 18px 55px -14px rgba(144, 208, 186, 0.18);
    --jv-shadow-card: 0 22px 44px -26px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1080px) {
    :root {
        --jv-gutter: 32px;
    }
}

@media (max-width: 720px) {
    :root {
        --jv-gutter: 20px;
        --jv-header-h: 68px;
    }
}