:root {
    --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-page: 1.5rem;
    --text-section: 1rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --control-h-sm: 1.75rem;
    --control-h: 2.25rem;
    --icon-sm: 16px;
    --icon: 20px;

    --z-drawer: 40;
    --z-dialog: 50;

    --content-max: 80rem;
    --form-max: 44rem;

    --nav-width: 13.5rem;
    --nav-width-collapsed: 4.25rem;
    --duration-fast: 120ms;
}

[data-theme=light] {
    --color-canvas: #f6f5f2;
    --color-surface: #ffffff;
    --color-surface-sunken: #efeee9;
    --color-border: #dcdad3;
    --color-border-strong: #a9a69c;
    --color-text: #1d1c1a;
    --color-text-muted: #5c5952;
    --color-accent: #3b4bc8;
    --color-on-accent: #ffffff;
    --color-accent-soft: #e6e8fb;
    --color-accent-text: #2f3ca8;
    --color-focus: #3b4bc8;
    --color-danger: #b42318;
    --color-danger-soft: #fde3e1;
    --color-danger-text: #a11d1d;
    --color-warning-soft: #fcefd2;
    --color-warning-text: #774900;
    --color-success-soft: #dff3e6;
    --color-success-text: #1d6b3a;
    --color-neutral-soft: #ebeae5;
    --color-neutral-text: #4f4c45;
    --color-info-soft: #e0edfa;
    --color-info-text: #1f5a92;
    --color-hover: #efeee9;
    --color-mark: #ffe08a;
    --color-mark-text: #1d1c1a;
    --color-shadow: rgb(29 28 26 / 0.08);
    --shadow-1: 0 1px 2px rgb(29 28 26 / 0.08);
    --shadow-overlay: 0 8px 24px rgb(29 28 26 / 0.18);

    --color-app-1: #3b4bc8;
    --color-app-2: #c2410c;
    --color-app-3: #0f766e;
    --color-app-4: #a21caf;
    --color-app-5: #b45309;
    --color-app-6: #2563eb;
    --color-app-7: #be123c;
    --color-app-8: #4d7c0f;
}

[data-theme=dark] {
    --color-canvas: #141413;
    --color-surface: #1d1d1b;
    --color-surface-sunken: #262623;
    --color-border: #363531;
    --color-border-strong: #5a5851;
    --color-text: #ecebe6;
    --color-text-muted: #a8a59c;
    --color-accent: #8f9bff;
    --color-on-accent: #12142e;
    --color-accent-soft: #262a52;
    --color-accent-text: #b8c0ff;
    --color-focus: #8f9bff;
    --color-danger: #ff8a80;
    --color-danger-soft: #431a18;
    --color-danger-text: #ffaaa3;
    --color-warning-soft: #3a2c0c;
    --color-warning-text: #f5cf7a;
    --color-success-soft: #13311f;
    --color-success-text: #8edfa9;
    --color-neutral-soft: #2c2c29;
    --color-neutral-text: #c4c1b8;
    --color-info-soft: #142a40;
    --color-info-text: #8cc4f5;
    --color-hover: #262623;
    --color-mark: #6b4f00;
    --color-mark-text: #fff3cf;
    --color-shadow: rgb(0 0 0 / 0.4);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.55);

    --color-app-1: #8f9bff;
    --color-app-2: #fb923c;
    --color-app-3: #2dd4bf;
    --color-app-4: #e879f9;
    --color-app-5: #fbbf24;
    --color-app-6: #60a5fa;
    --color-app-7: #fb7185;
    --color-app-8: #a3e635;
}