:root {
  --color-canvas: #f4f3ee;
  --color-canvas-raised: #faf9f6;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f7f3;
  --color-sidebar: #172126;
  --color-sidebar-raised: #202d32;
  --color-sidebar-text: #b9c3c1;
  --color-text: #162126;
  --color-text-secondary: #66716f;
  --color-text-muted: #8b9693;
  --color-border: #deded7;
  --color-border-strong: #c7cac3;
  --color-primary: #2e655b;
  --color-accent: var(--color-primary);
  --color-primary-hover: #234f47;
  --color-primary-soft: #e6f0ed;
  --color-success: #39725b;
  --color-success-soft: #e9f3ed;
  --color-warning: #9a651d;
  --color-warning-soft: #fbf1df;
  --color-danger: #a54237;
  --color-danger-soft: #f9ebe8;
  --color-protected: #66508c;
  --color-protected-soft: #f1edf7;
  --color-focus: #bd8248;
  --color-text-primary: var(--color-text);
  --color-background: var(--color-canvas);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --font-xs: 0.72rem;
  --font-sm: 0.825rem;
  --font-size-sm: var(--font-sm);
  --font-base: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: clamp(1.9rem, 2.5vw, 2.6rem);
  --font-2xl: clamp(2.2rem, 3.6vw, 3.5rem);

  --radius-sm: 0.45rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --radius-pill: 999px;
  --control-height: 2.75rem;
  --sidebar-width: 17rem;
  --topbar-height: 4.5rem;
  --content-width: 92rem;
  --shadow-xs: 0 1px 2px rgb(22 33 38 / 5%);
  --shadow-sm: 0 0.35rem 1.25rem rgb(22 33 38 / 7%);
  --shadow-md: 0 1rem 2.5rem rgb(22 33 38 / 12%);
  --transition-fast: 140ms ease;
}

html[data-interface-theme="light"] {
  color-scheme: light;
}

html[data-interface-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #111719;
  --color-canvas-raised: #182023;
  --color-surface: #1d272a;
  --color-surface-muted: #222e31;
  --color-sidebar: #0c1113;
  --color-sidebar-raised: #182124;
  --color-sidebar-text: #c2cecc;
  --color-text: #edf3f1;
  --color-text-secondary: #b1bfbc;
  --color-text-muted: #94a4a0;
  --color-border: #354347;
  --color-border-strong: #4b5b5f;
  --color-primary-hover: #87c4b7;
  --color-success: #78bea0;
  --color-success-soft: #20362e;
  --color-warning: #e4b76d;
  --color-warning-soft: #3a2d1b;
  --color-danger: #ef9488;
  --color-danger-soft: #3c2422;
  --color-protected: #b5a2db;
  --color-protected-soft: #302942;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 24%);
  --shadow-sm: 0 0.35rem 1.25rem rgb(0 0 0 / 25%);
  --shadow-md: 0 1rem 2.5rem rgb(0 0 0 / 34%);
}

@media (prefers-color-scheme: dark) {
  html[data-interface-theme="system"] {
    color-scheme: dark;
    --color-canvas: #111719;
    --color-canvas-raised: #182023;
    --color-surface: #1d272a;
    --color-surface-muted: #222e31;
    --color-sidebar: #0c1113;
    --color-sidebar-raised: #182124;
    --color-sidebar-text: #c2cecc;
    --color-text: #edf3f1;
    --color-text-secondary: #b1bfbc;
    --color-text-muted: #94a4a0;
    --color-border: #354347;
    --color-border-strong: #4b5b5f;
    --color-primary-hover: #87c4b7;
    --color-success: #78bea0;
    --color-success-soft: #20362e;
    --color-warning: #e4b76d;
    --color-warning-soft: #3a2d1b;
    --color-danger: #ef9488;
    --color-danger-soft: #3c2422;
    --color-protected: #b5a2db;
    --color-protected-soft: #302942;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 24%);
    --shadow-sm: 0 0.35rem 1.25rem rgb(0 0 0 / 25%);
    --shadow-md: 0 1rem 2.5rem rgb(0 0 0 / 34%);
  }
}

html[data-interface-accent="neutral"] {
  --color-primary: #52615f;
  --color-primary-hover: #3c4947;
  --color-focus: #7e918d;
}

html[data-interface-accent="blue"] {
  --color-primary: #356b91;
  --color-primary-hover: #285471;
  --color-focus: #4f8fb9;
}

html[data-interface-accent="green"] {
  --color-primary: #2e655b;
  --color-primary-hover: #234f47;
  --color-focus: #bd8248;
}

html[data-interface-accent="warm"] {
  --color-primary: #8b5539;
  --color-primary-hover: #6f422c;
  --color-focus: #b27650;
}

html[data-interface-theme] {
  --color-accent: var(--color-primary);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
}