:root {
    color-scheme: light;
    --vl-font-sans: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --vl-font-serif: var(--font-serif, "Fraunces", Georgia, serif);
    --vl-font-panel: var(--font-panel, "IBM Plex Sans", sans-serif);
    --vl-bg: #faf8f4;
    --vl-bg-warm: #faf8f4;
    --vl-surface: #ffffff;
    --vl-surface-soft: #f2eee6;
    --vl-surface-raised: rgba(255, 255, 255, 0.94);
    --vl-ink: #1a2d31;
    --vl-ink-strong: #0a1518;
    --vl-text: #1a2d31;
    --vl-text-soft: #3a4d52;
    --vl-text-muted: #7c8a8e;
    --vl-line: rgba(26, 45, 49, 0.10);
    --vl-line-strong: rgba(26, 45, 49, 0.18);
    --vl-primary: #0c5460;
    --vl-primary-soft: #eaf2f3;
    --vl-accent: #e8704c;
    --vl-accent-strong: #c95c3c;
    --vl-accent-soft: #fceee8;
    --vl-on-primary: #ffffff;
    --vl-on-accent: #ffffff;
    --vl-success: #2f8757;
    --vl-success-soft: #e8f2ec;
    --vl-warning: #c9883b;
    --vl-warning-soft: #fbf1de;
    --vl-danger: #c44536;
    --vl-danger-soft: #fbe6e4;
    --vl-info: #2a6fdb;
    --vl-info-soft: #e0eef1;
    --vl-footer-bg: #1a2d31;
    --vl-footer-text: rgba(250, 248, 244, 0.72);
    --vl-on-footer: #faf8f4;
    --vl-sidebar-start: #1a2d31;
    --vl-sidebar-end: #0a1518;
    --vl-radius-sm: 6px;
    --vl-radius-md: 8px;
    --vl-radius-lg: 14px;
    --vl-radius-xl: 22px;
    --vl-shadow-sm: 0 2px 6px rgba(12, 84, 96, 0.08);
    --vl-shadow-md: 0 8px 24px rgba(12, 84, 96, 0.10);
    --vl-shadow-lg: 0 20px 48px rgba(12, 84, 96, 0.14);
    --vl-focus: 0 0 0 4px rgba(232, 112, 76, 0.28);

    --c-ink: var(--vl-text);
    --c-ink-soft: var(--vl-text);
    --c-cream: var(--vl-bg-warm);
    --c-cream-warm: var(--vl-surface-soft);
    --c-gold: var(--vl-accent);
    --c-gold-deep: var(--vl-accent-strong);
    --c-gold-light: var(--vl-accent-soft);
    --c-sage: var(--vl-success);
    --c-sage-light: var(--vl-success-soft);
    --c-coral: var(--vl-danger);
    --c-coral-light: var(--vl-danger-soft);
    --c-amber: var(--vl-warning);
    --c-amber-light: var(--vl-warning-soft);
    --c-blue: var(--vl-info);
    --c-blue-light: var(--vl-info-soft);
    --c-mist: #e6dfd1;
    --c-line: var(--vl-line);
    --c-line-strong: var(--vl-line-strong);
    --c-text: var(--vl-text);
    --c-text-soft: var(--vl-text-soft);
    --c-text-muted: var(--vl-text-muted);
    --c-white: var(--vl-surface);
    --shadow-sm: var(--vl-shadow-sm);
    --shadow-md: var(--vl-shadow-md);
    --shadow-lg: var(--vl-shadow-lg);
    --shadow-xl: var(--vl-shadow-lg);
    --r-sm: var(--vl-radius-sm);
    --r-md: var(--vl-radius-md);
    --r-lg: var(--vl-radius-lg);
    --r-xl: var(--vl-radius-xl);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --vl-bg: #08171b;
    --vl-bg-warm: #0e2227;
    --vl-surface: #122d33;
    --vl-surface-soft: #183941;
    --vl-surface-raised: rgba(18, 45, 51, 0.94);
    --vl-ink: #f4efe3;
    --vl-ink-strong: #ffffff;
    --vl-text: #e6ddd0;
    --vl-text-soft: #c7bca9;
    --vl-text-muted: #9f9a91;
    --vl-line: rgba(233, 223, 201, 0.15);
    --vl-line-strong: rgba(233, 223, 201, 0.3);
    --vl-primary: #5b9aa3;
    --vl-primary-soft: rgba(91, 154, 163, 0.18);
    --vl-accent: #ed8b65;
    --vl-accent-strong: #e8704c;
    --vl-accent-soft: rgba(237, 139, 101, 0.2);
    --vl-on-primary: #08171b;
    --vl-on-accent: #1f1609;
    --vl-success: #8ab58f;
    --vl-success-soft: rgba(138, 181, 143, 0.18);
    --vl-warning: #c9883b;
    --vl-warning-soft: rgba(201, 136, 59, 0.2);
    --vl-danger: #ff8a8f;
    --vl-danger-soft: rgba(255, 138, 143, 0.2);
    --vl-info: #8eb8bd;
    --vl-info-soft: rgba(142, 184, 189, 0.18);
    --vl-footer-bg: #06151a;
    --vl-footer-text: rgba(244, 255, 252, 0.74);
    --vl-on-footer: #f7f3ea;
    --vl-sidebar-start: #183941;
    --vl-sidebar-end: #06151a;
    --vl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --vl-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.24);
    --vl-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.36);
    --vl-focus: 0 0 0 4px rgba(225, 173, 98, 0.26);
    --c-cream-warm: #162f35;
    --c-mist: #1c3b42;
}

.vl-theme-toggle {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top));
    right: calc(1rem + env(safe-area-inset-right));
    z-index: 1065;
    width: 42px;
    height: 42px;
    border: 1px solid var(--vl-line);
    border-radius: 999px;
    background: var(--vl-surface-raised);
    color: var(--vl-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--vl-shadow-sm);
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.vl-theme-toggle:hover {
    border-color: var(--vl-accent);
    box-shadow: var(--vl-shadow-md);
}

.vl-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--vl-focus);
}

.vl-theme-toggle .vl-theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.vl-theme-toggle .vl-theme-icon-dark,
:root[data-theme="dark"] .vl-theme-toggle .vl-theme-icon-light {
    display: none;
}

:root[data-theme="dark"] .vl-theme-toggle .vl-theme-icon-dark {
    display: inline-block;
}