:root {
    --font-family-sans: "Public Sans", sans-serif;
    --primitive-white: #ffffff;
    --primitive-navy-950: #0d1b2c;
    --primitive-navy-900: #172c45;
    --primitive-navy-850: #21374f;
    --primitive-navy-750: #294769;
    --primitive-navy-700: #3b536f;
    --primitive-gray-50: #f5f7fb;
    --primitive-gray-100: #ebf0f6;
    --primitive-gray-250: #cbd6e2;
    --primitive-gray-300: #c0cad6;
    --primitive-gray-400: #9aa9ba;
    --primitive-gray-450: #8194a8;
    --primitive-gray-500: #708198;
    --primitive-gray-600: #586c80;
    --primitive-gray-650: #53677b;
    --primitive-blue-50: #e9f0ff;
    --primitive-blue-200: #b3cfff;
    --primitive-blue-300: #8db6ff;
    --primitive-blue-600: #326dd0;
    --primitive-blue-700: #245fbc;
    --primitive-blue-800: #17498f;
    --primitive-green-50: #edf8f1;
    --primitive-green-200: #9fdfb9;
    --primitive-green-800: #175d3b;
    --primitive-green-950: #0d3528;
    --primitive-amber-50: #fff5dc;
    --primitive-amber-200: #f8d58a;
    --primitive-amber-850: #7e480a;
    --primitive-amber-950: #3c2a0e;
    --primitive-red-50: #fff0ee;
    --primitive-red-200: #ffb6ac;
    --primitive-red-750: #b42318;
    --primitive-red-850: #a52720;
    --primitive-red-950: #46201f;
    --primitive-shadow-light: #102a431f;
    --primitive-shadow-dark: #00000066;
    --primitive-overlay-light: #0d1b2c99;
    --primitive-overlay-dark: #000000b3;
    --color-bg-canvas: var(--primitive-gray-50);
    --color-bg-surface: var(--primitive-white);
    --color-bg-subtle: var(--primitive-gray-100);
    --color-bg-brand: var(--primitive-blue-700);
    --color-bg-brand-hover: var(--primitive-blue-800);
    --color-bg-brand-soft: var(--primitive-blue-50);
    --color-bg-disabled: var(--primitive-gray-100);
    --color-text-primary: var(--primitive-navy-900);
    --color-text-secondary: var(--primitive-gray-650);
    --color-text-muted: var(--primitive-gray-600);
    --color-text-on-brand: var(--primitive-white);
    --color-text-brand: var(--primitive-blue-700);
    --color-border-default: var(--primitive-gray-250);
    --color-border-strong: var(--primitive-gray-450);
    --color-border-focus: var(--primitive-blue-600);
    --color-bg-success: var(--primitive-green-50);
    --color-text-success: var(--primitive-green-800);
    --color-bg-warning: var(--primitive-amber-50);
    --color-text-warning: var(--primitive-amber-850);
    --color-bg-danger: var(--primitive-red-50);
    --color-text-danger: var(--primitive-red-850);
    --color-bg-destructive: var(--primitive-red-750);
    --color-bg-info: var(--primitive-blue-50);
    --color-text-info: var(--primitive-blue-700);
    --color-effect-shadow: var(--primitive-shadow-light);
    --color-bg-overlay: var(--primitive-overlay-light);
    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --radius-none: 0px;
    --radius-small: 4px;
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-panel: 16px;
    --radius-full: 999px;
    --sizes-control-small: 40px;
    --sizes-control-default: 48px;
    --sizes-table-row: 64px;
    --sizes-sidebar: 248px;
    --sizes-icon: 20px;
    --type-display-size: 40px;
    --type-display-line: 48px;
    --type-heading-1-size: 32px;
    --type-heading-1-line: 40px;
    --type-heading-2-size: 24px;
    --type-heading-2-line: 32px;
    --type-heading-3-size: 20px;
    --type-heading-3-line: 28px;
    --type-body-large-size: 18px;
    --type-body-large-line: 28px;
    --type-body-size: 16px;
    --type-body-line: 24px;
    --type-label-size: 16px;
    --type-label-line: 24px;
    --type-small-size: 14px;
    --type-small-line: 20px;
    --type-small-strong-size: 14px;
    --type-small-strong-line: 20px;
    --type-caption-size: 12px;
    --type-caption-line: 16px;
}

[data-theme="dark"] {
    --color-bg-canvas: var(--primitive-navy-950);
    --color-bg-surface: var(--primitive-navy-900);
    --color-bg-subtle: var(--primitive-navy-850);
    --color-bg-brand: var(--primitive-blue-300);
    --color-bg-brand-hover: var(--primitive-blue-200);
    --color-bg-brand-soft: var(--primitive-navy-750);
    --color-bg-disabled: var(--primitive-navy-850);
    --color-text-primary: var(--primitive-gray-50);
    --color-text-secondary: var(--primitive-gray-300);
    --color-text-muted: var(--primitive-gray-400);
    --color-text-on-brand: var(--primitive-navy-950);
    --color-text-brand: var(--primitive-blue-300);
    --color-border-default: var(--primitive-navy-700);
    --color-border-strong: var(--primitive-gray-500);
    --color-border-focus: var(--primitive-blue-300);
    --color-bg-success: var(--primitive-green-950);
    --color-text-success: var(--primitive-green-200);
    --color-bg-warning: var(--primitive-amber-950);
    --color-text-warning: var(--primitive-amber-200);
    --color-bg-danger: var(--primitive-red-950);
    --color-text-danger: var(--primitive-red-200);
    --color-bg-destructive: var(--primitive-red-200);
    --color-bg-info: var(--primitive-navy-750);
    --color-text-info: var(--primitive-blue-300);
    --color-effect-shadow: var(--primitive-shadow-dark);
    --color-bg-overlay: var(--primitive-overlay-dark);
}

:root {
    --icon-foreground: var(--color-text-secondary);
}
[data-icon-tone="default"] {
    --icon-foreground: var(--color-text-secondary);
}
[data-icon-tone="brand"] {
    --icon-foreground: var(--color-text-brand);
}
[data-icon-tone="on-brand"] {
    --icon-foreground: var(--color-text-on-brand);
}
[data-icon-tone="muted"] {
    --icon-foreground: var(--color-text-muted);
}