:root {
    color-scheme: light;

    --wtb-plane: var(--mud-palette-background);
    --wtb-surface: var(--mud-palette-surface);
    --wtb-ink: var(--mud-palette-text-primary);
    --wtb-ink-secondary: var(--mud-palette-text-secondary);
    --wtb-line: var(--mud-palette-lines-default);
    --wtb-accent: var(--mud-palette-primary);

    --wtb-on-brand: #ffffff;
    --wtb-on-brand-rest: #aeb6c1;
    --wtb-on-brand-muted: #7d8896;

    --wtb-ink-muted: #666d7b;

    --wtb-accent-solid: #0071bc;
    --wtb-on-accent-solid: #ffffff;

    --wtb-app-field: #f6f9fc;
    --wtb-app-wave-1: #f2f6fa;
    --wtb-app-wave-2: #eef3f8;

    --wtb-focus: #0071bc;

    --wtb-radius-panel: 14px;
    --wtb-radius-field: 8px;
    --wtb-radius-node: 999px;

    --wtb-shadow-panel: 0 1px 2px rgba(18, 24, 30, 0.06), 0 6px 16px -6px rgba(18, 24, 30, 0.13);
    --wtb-shadow-raised: 0 2px 6px rgba(18, 24, 30, 0.08), 0 16px 32px -12px rgba(18, 24, 30, 0.18);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --wtb-ink-muted: #868e9c;

    --wtb-app-field: #0a0e13;
    --wtb-app-wave-1: #0d1523;
    --wtb-app-wave-2: #101d2e;

    --wtb-focus: #2e8fd4;

    --wtb-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 20px -8px rgba(0, 0, 0, 0.62);
    --wtb-shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.56), 0 20px 40px -14px rgba(0, 0, 0, 0.7);
}