:root {
    color-scheme: light;
    --navy: oklch(27.3% 0.047 247.8);
    --ice: oklch(95.2% 0.010 204.9);
    --orange: oklch(75.7% 0.161 65.7);
    --sand: oklch(86.3% 0.036 79.7);
    --white: oklch(100% 0 0);
    --teal: oklch(54.6% 0.068 194.0);
    --blue: oklch(45.9% 0.071 238.9);
    --green: oklch(59.5% 0.074 153.4);
    --terracotta: oklch(62.7% 0.126 40.2);
    --purple: oklch(53.8% 0.063 304.3);
    --slate: oklch(59.2% 0.026 242.2);
    --yellow: oklch(84.3% 0.135 89.6);

    --font-scale: 1;
    --density: 1;
    --border-width: 1px;

    --surface-page: var(--ice);
    --surface: var(--white);
    --surface-raised: oklch(98% 0.006 204.9);
    --surface-sunken: oklch(93% 0.012 204.9);
    --border-subtle: oklch(90% 0.012 247.8);
    --border: oklch(84% 0.016 247.8);
    --border-strong: oklch(68% 0.024 247.8);

    --text: var(--navy);
    --text-subtle: oklch(56% 0.028 247.8);
    --text-muted: oklch(48% 0.035 238.9);

    --accent: var(--blue);
    --accent-soft: oklch(95% 0.022 238.9);
    --accent-strong: oklch(36% 0.070 238.9);
    --accent-contrast: var(--white);

    --brand: var(--orange);
    --brand-strong: oklch(52% 0.150 65.7);
    --brand-contrast: var(--navy);

    --negative: var(--terracotta);
    --negative-soft: oklch(95% 0.030 40.2);
    --negative-strong: oklch(44% 0.120 40.2);

    --positive: var(--green);
    --positive-soft: oklch(95% 0.024 153.4);
    --positive-strong: oklch(42% 0.070 153.4);

    --info: var(--blue);
    --info-soft: oklch(95% 0.022 238.9);
    --info-strong: oklch(36% 0.070 238.9);

    --upload-create: oklch(92% 0.050 153.4);
    --upload-update: oklch(92% 0.045 238.9);
    --upload-delete: oklch(92% 0.090 90);
    --upload-delete-strong: oklch(45% 0.110 90);
    --upload-modified: oklch(92% 0.045 238.9);
    --upload-error: var(--negative-soft);

    --shadow: 0 1px 2px oklch(27.3% 0.047 247.8 / 0.10), 0 4px 12px oklch(27.3% 0.047 247.8 / 0.08);
    --scrim: oklch(0% 0 0 / 0.45);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 9px;
    --radius-xl: 12px;
    --radius-2xl: calc(var(--space-8) * 2);

    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-serif: "IBM Plex Serif", Georgia, serif;
    --font-display: "IBM Plex Sans", system-ui, sans-serif;
    --font-brand: "Giro", "IBM Plex Sans", system-ui, sans-serif;
    --size-xs: calc(0.75rem * var(--font-scale));
    --size-sm: calc(0.875rem * var(--font-scale));
    --size-md: calc(1rem * var(--font-scale));
    --size-lg: calc(1.125rem * var(--font-scale));
    --size-xl: calc(1.25rem * var(--font-scale));
    --size-2xl: calc(1.75rem * var(--font-scale));
    --size-3xl: calc(2.125rem * var(--font-scale));
    --leading-none: 1;
    --leading-normal: 1.5;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.06em;
    --underline-offset: 2px;
    --weight-normal: 400;
    --weight-medium: 600;

    --control-height: calc(var(--size-sm) * 1.4 + var(--space-2) * 2);

    --space-1: calc(0.25rem * var(--density));
    --space-2: calc(0.5rem * var(--density));
    --space-3: calc(0.75rem * var(--density));
    --space-4: calc(1rem * var(--density));
    --space-6: calc(1.5rem * var(--density));
    --space-8: calc(2rem * var(--density));
    --header-height: calc(3.5rem * var(--density));

    --width-logo: calc(5rem * var(--font-scale));
    --width-auth: calc(58rem * var(--font-scale));
    --width-auth-logo: calc(7rem * var(--font-scale));
    --width-popover: calc(16rem * var(--font-scale));
    --width-prefs: calc(22rem * var(--font-scale));
    --width-username: calc(12rem * var(--font-scale));
    --width-menu: calc(64rem * var(--font-scale));
    --height-menu: calc(40rem * var(--font-scale));
    --width-menu-column: calc(15rem * var(--font-scale));
    --width-sidebar: calc(16rem * var(--font-scale));
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-page: oklch(13% 0.028 247.8);
    --surface: oklch(21% 0.034 247.8);
    --surface-raised: oklch(25% 0.036 247.8);
    --surface-sunken: oklch(10% 0.022 247.8);
    --border-subtle: oklch(28% 0.038 247.8);
    --border: oklch(37% 0.042 247.8);
    --border-strong: oklch(50% 0.045 247.8);

    --text: oklch(95.2% 0.010 204.9);
    --text-subtle: oklch(62% 0.022 247.8);
    --text-muted: oklch(74% 0.020 204.9);

    --accent: oklch(70% 0.068 238.9);
    --accent-soft: oklch(30% 0.035 238.9);
    --accent-strong: oklch(82% 0.055 238.9);
    --accent-contrast: oklch(19% 0.030 247.8);

    --brand: oklch(72% 0.135 65.7);
    --brand-strong: oklch(85% 0.120 65.7);
    --brand-contrast: var(--navy);

    --negative: oklch(70% 0.120 40.2);
    --negative-soft: oklch(29% 0.045 40.2);
    --negative-strong: oklch(82% 0.095 40.2);

    --positive: oklch(72% 0.074 153.4);
    --positive-soft: oklch(28% 0.035 153.4);
    --positive-strong: oklch(84% 0.060 153.4);

    --info: oklch(70% 0.068 238.9);
    --info-soft: oklch(30% 0.035 238.9);
    --info-strong: oklch(82% 0.055 238.9);

    --upload-create: oklch(34% 0.050 153.4);
    --upload-update: oklch(34% 0.045 238.9);
    --upload-delete: oklch(34% 0.070 90);
    --upload-delete-strong: oklch(82% 0.090 90);
    --upload-modified: oklch(34% 0.045 238.9);
    --upload-error: var(--negative-soft);

    --shadow: 0 1px 2px oklch(0% 0 0 / 0.45), 0 4px 12px oklch(0% 0 0 / 0.35);
}