:root {
  color-scheme: light dark;
  --color-canvas: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #eef2f5;
  --color-foreground: #17202a;
  --color-foreground-muted: #5b6673;
  --color-border: #c8d0d8;
  --color-divider: #dce2e7;
  --color-focus: #075fcc;
  --color-primary: #0d6f61;
  --color-accent: #8a4d00;
  --color-success: #176b3a;
  --color-warning: #8a4d00;
  --color-danger: #b42318;
  --color-info: #075fcc;
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --font-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem);
  --font-title: clamp(1.625rem, 1.15rem + 1.6vw, 3.25rem);
  --font-heading: clamp(1.25rem, 1.08rem + 0.65vw, 2rem);
  --line-body: 1.5;
  --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;
  --space-page: clamp(1rem, 0.65rem + 1.8vw, 2.5rem);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-pill: 999rem;
  --shadow-1: 0 0.0625rem 0.1875rem rgb(15 23 42 / 0.12);
  --shadow-2: 0 0.75rem 2rem rgb(15 23 42 / 0.16);
  --control-height: clamp(2.75rem, 2.55rem + 0.35vw, 3rem);
  --icon-size: 1.25rem;
  --content-width: 112rem;
  --nav-width: clamp(13.5rem, 11rem + 4vw, 17rem);
  --motion-fast: 120ms;
  --motion-normal: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --z-nav: 20;
  --z-panel: 40;
  --z-toast: 60;
  --z-dialog: 80;
  --density-gap: var(--space-4);
  --density-row-height: 3rem;
  --target-min: 2.75rem;
}

[data-density="compact"] {
  --density-gap: var(--space-2);
  --density-row-height: 2.75rem;
}

[data-density="warehouse"] {
  --density-gap: var(--space-4);
  --density-row-height: 3.5rem;
  --control-height: 3.25rem;
  --target-min: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #10161d;
    --color-surface: #17202a;
    --color-surface-elevated: #1e2935;
    --color-surface-muted: #263340;
    --color-foreground: #f4f7fa;
    --color-foreground-muted: #bdc8d3;
    --color-border: #536170;
    --color-divider: #3c4956;
    --color-focus: #8cc8ff;
    --color-primary: #59c7b2;
    --color-accent: #ffc477;
    --color-success: #7ddb9d;
    --color-warning: #ffc477;
    --color-danger: #ffaaa2;
    --color-info: #8cc8ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-normal: 0.01ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: currentColor;
    --color-divider: currentColor;
    --shadow-1: none;
    --shadow-2: none;
  }
}

@media (forced-colors: active) {
  :root {
    --color-focus: Highlight;
    --color-border: CanvasText;
    --color-primary: LinkText;
    --color-danger: Mark;
  }
}