:root, [data-theme="light"] {
  --bg-sunken: #f6f7f9;
  --bg-canvas: #ffffff;
  --bg-surface: #ffffff;
  --bg-raised: #ffffff;
  --component-bg: #f3f4f7;
  --component-bg-hover: #e9ebf0;
  --component-bg-selected: #e0e4ec;
  --border-subtle: #e6e8ee;
  --border-interactive: #d3d7e0;
  --border-strong: #b6bcca;
  --border-focus: #0f5fa8;
  --text-primary: #092846;
  --text-secondary: #56617a;
  --text-tertiary: #62697d;
  --text-on-solid: #ffffff;
  --brand-solid: #0f5fa8;
  --brand-solid-hover: #0d5292;
  --brand-subtle: #eaf2fb;
  --brand-text: #0d5292;
  --accent-solid: #f08124;
  --accent-text: #a85008;
  --accent-subtle: #fff4ea;
  --success-solid: #157f4a;
  --success-subtle: #e9f7ef;
  --success-text: #11663b;
  --warning-solid: #c2820c;
  --warning-subtle: #fdf4e3;
  --warning-text: #8a5d07;
  --danger-solid: #c8342f;
  --danger-subtle: #fdeceb;
  --danger-text: #a22824;
  --info-solid: #2563c9;
  --info-subtle: #eaf1fd;
  --info-text: #1d4fa3;
  --text-disabled: #738496;
  --border-disabled: #c4cbd3;
  --component-bg-disabled: #e3e6eb;
  --shadow-popover: 0 4px 12px rgba(9, 40, 70, 0.10), 0 1px 3px rgba(9, 40, 70, 0.06);
  --shadow-modal: 0 16px 40px rgba(9, 40, 70, 0.16), 0 2px 8px rgba(9, 40, 70, 0.08);
}

[data-theme="dark"] {
  --bg-sunken: #0d1117;
  --bg-canvas: #12171f;
  --bg-surface: #161c26;
  --bg-raised: #1c2330;
  --component-bg: #1b222d;
  --component-bg-hover: #222b38;
  --component-bg-selected: #2a3444;
  --border-subtle: #232c39;
  --border-interactive: #303c4d;
  --border-strong: #43526a;
  --border-focus: #5a9be8;
  --text-primary: #e8edf5;
  --text-secondary: #a3afc4;
  --text-tertiary: #8c98ac;
  --text-on-solid: #ffffff;
  --brand-solid: #2a77ca;
  --brand-solid-hover: #4a92de;
  --brand-subtle: #12263c;
  --brand-text: #74b0ea;
  --accent-solid: #f08124;
  --accent-text: #f2a05a;
  --accent-subtle: #2e1e0f;
  --success-solid: #2f9e63;
  --success-subtle: #10281c;
  --success-text: #62c894;
  --warning-solid: #d59a2a;
  --warning-subtle: #2a2110;
  --warning-text: #e8b95c;
  --danger-solid: #e05a55;
  --danger-subtle: #2d1616;
  --danger-text: #f08b87;
  --info-solid: #4a8ee0;
  --info-subtle: #13233c;
  --info-text: #82b5ee;
  --text-disabled: #747981;
  --border-disabled: #393e46;
  --component-bg-disabled: #29303b;
  --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
}

:root {
  --space-05: 2px;
  --space-1: 4px;
  --space-15: 6px;
  --space-2: 8px;
  --space-25: 10px;
  --space-3: 12px;
  --space-35: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --row-compact: 32px;
  --row-default: 36px;
  --row-roomy: 44px;
  --dur-tint: 90ms;
  --dur-fade: 110ms;
  --dur-rise: 130ms;
  --dur-panel: 180ms;
  --dur-hold: 2600ms;
  --dur-pulse: 1400ms;
  --ease: ease;
  --ease-loop: ease-in-out;
  --ctl-sm: 24px;
  --ctl-md: 28px;
  --ctl-lg: 32px;
  --ctl-pad-sm: 8px;
  --ctl-pad-md: 10px;
  --ctl-pad-lg: 14px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.display {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page-title {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.section-title {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  letter-spacing: -0.006em;
}

.ui {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 450;
}

.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.hint {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 400;
}

.overline {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
}

.micro {
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 500;
}

.number {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}