.theme-light {
    --wf-page-bg: #f4f7fb;
    --wf-page-bg-secondary: #eef4f8;
    --wf-surface: #ffffff;
    --wf-surface-muted: #eef4ff;
    --wf-surface-elevated: rgba(255, 255, 255, 0.88);
    --wf-surface-hero: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 247, 245, 0.88));
    --wf-surface-showcase: linear-gradient(180deg, rgba(10, 37, 64, 0.96), rgba(19, 64, 116, 0.92));
    --wf-surface-showcase-card: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    --wf-surface-showcase-metric: rgba(255, 255, 255, 0.08);
    --wf-border: #dbe4ef;
    --wf-border-strong: #d9e1eb;
    --wf-text: #0a2540;
    --wf-text-muted: #587088;
    --wf-link: #0d5bd4;
    --wf-primary: #1b6ec2;
    --wf-primary-strong: #1861ac;
    --wf-success: #198754;
    --wf-danger: #dc3545;
    --wf-shadow: 0 8px 20px rgba(10, 37, 64, 0.04);
    --wf-sidebar-start: #08254c;
    --wf-sidebar-mid: #133b66;
    --wf-sidebar-end: #165f7b;
    --wf-sidebar-text: #d7e5f5;
    --wf-sidebar-muted: rgba(255, 255, 255, 0.75);
    --wf-sidebar-active: rgba(255, 255, 255, 0.28);
    --wf-sidebar-hover: rgba(255, 255, 255, 0.12);
    --wf-topbar-bg: rgba(255, 255, 255, 0.92);
    --wf-workspace-pill-bg: #e8f0ff;
    --wf-workspace-pill-text: #0b49a0;
    --wf-hero-grad-start: #eef5ff;
    --wf-hero-grad-end: #f8fbff;
    --wf-header-bg: color-mix(in srgb, var(--wf-page-bg) 80%, transparent);
    --wf-chip-bg: rgba(255, 255, 255, 0.75);
    --wf-chip-border: rgba(10, 37, 64, 0.08);
    --wf-input-bg: #ffffff;
}

.theme-dark {
    --wf-page-bg: #0f1723;
    --wf-page-bg-secondary: #0b1320;
    --wf-surface: #152132;
    --wf-surface-muted: #1a2a40;
    --wf-surface-elevated: rgba(21, 33, 50, 0.92);
    --wf-surface-hero: linear-gradient(145deg, rgba(20, 32, 49, 0.96), rgba(17, 26, 40, 0.92));
    --wf-surface-showcase: linear-gradient(180deg, rgba(6, 10, 18, 0.98), rgba(12, 24, 40, 0.95));
    --wf-surface-showcase-card: linear-gradient(180deg, rgba(142, 184, 255, 0.12), rgba(255, 255, 255, 0.05));
    --wf-surface-showcase-metric: rgba(142, 184, 255, 0.08);
    --wf-border: #26364a;
    --wf-border-strong: #31445b;
    --wf-text: #f2f7ff;
    --wf-text-muted: #b0c2d8;
    --wf-link: #8eb8ff;
    --wf-primary: #5d9eff;
    --wf-primary-strong: #447fd8;
    --wf-success: #49b57a;
    --wf-danger: #ff6b7a;
    --wf-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    --wf-sidebar-start: #0b1020;
    --wf-sidebar-mid: #102038;
    --wf-sidebar-end: #17314f;
    --wf-sidebar-text: #dce9f8;
    --wf-sidebar-muted: rgba(255, 255, 255, 0.68);
    --wf-sidebar-active: rgba(255, 255, 255, 0.18);
    --wf-sidebar-hover: rgba(255, 255, 255, 0.08);
    --wf-topbar-bg: rgba(15, 23, 35, 0.92);
    --wf-workspace-pill-bg: rgba(93, 158, 255, 0.16);
    --wf-workspace-pill-text: #aecdff;
    --wf-hero-grad-start: #172436;
    --wf-hero-grad-end: #101927;
    --wf-header-bg: rgba(11, 19, 32, 0.86);
    --wf-chip-bg: rgba(18, 31, 47, 0.92);
    --wf-chip-border: rgba(142, 184, 255, 0.12);
    --wf-input-bg: rgba(13, 23, 37, 0.92);
}