:root,
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #F7F5EF;
  --surface: #FFFFFF;
  --surface-muted: #F1EEE6;
  --surface-hover: #ECE8DE;
  --text: #1C1916;
  --text-muted: #655F57;
  --text-subtle: #81786C;
  --border: #D8D1C5;
  --border-strong: #BBB1A1;
  --action: #2D2925;
  --action-text: #FFFFFF;
  --action-hover: #48413A;
  --positive: #315B3E;
  --positive-bg: #E6F0E9;
  --warning: #6E4F00;
  --warning-bg: #FFF2C7;
  --danger: #8A342B;
  --danger-bg: #FBE8E5;
  --danger-action-text: #FFFFFF;
  --focus: #7A5A00;
  --shadow: 0 10px 28px rgba(53, 45, 37, 0.08);
  --overlay: rgba(28, 25, 22, 0.38);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #11100E;
  --surface: #181613;
  --surface-muted: #27231E;
  --surface-hover: #302B25;
  --text: #F4F0E8;
  --text-muted: #B8B0A4;
  --text-subtle: #9A9185;
  --border: #3A342D;
  --border-strong: #554B40;
  --action: #E7DED0;
  --action-text: #1A1714;
  --action-hover: #F4EDE3;
  --positive: #A9D5B7;
  --positive-bg: #173024;
  --warning: #F1D080;
  --warning-bg: #342A12;
  --danger: #F3A69D;
  --danger-bg: #3A201C;
  --danger-action-text: #FFF0EC;
  --focus: #E7C77A;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  --overlay: rgba(0, 0, 0, 0.65);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --canvas: #11100E;
    --surface: #181613;
    --surface-muted: #27231E;
    --surface-hover: #302B25;
    --text: #F4F0E8;
    --text-muted: #B8B0A4;
    --text-subtle: #9A9185;
    --border: #3A342D;
    --border-strong: #554B40;
    --action: #E7DED0;
    --action-text: #1A1714;
    --action-hover: #F4EDE3;
    --positive: #A9D5B7;
    --positive-bg: #173024;
    --warning: #F1D080;
    --warning-bg: #342A12;
    --danger: #F3A69D;
    --danger-bg: #3A201C;
    --danger-action-text: #FFF0EC;
    --focus: #E7C77A;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    --overlay: rgba(0, 0, 0, 0.65);
  }
}

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --control-height: 40px;
  --touch-target: 44px;
  --motion-fast: 140ms;
  --motion-ease: ease;
}