:root {
  color-scheme: light;
  --surface-canvas: #f5f6f7;
  --surface-panel: #ffffff;
  --surface-soft: #f8fafc;
  --text-primary: #20242b;
  --text-muted: #5d6670;
  --text-faint: #5d6670;
  --border-default: #e3e7eb;
  --border-strong: #cfd7dd;
  --color-brand-ink: #18324a;
  --color-brand: #0b7285;
  --color-brand-strong: #075e6e;
  --color-brand-soft: #e7f5f7;
  --status-success: #0f6b46;
  --status-warning: #96500f;
  --status-danger: #c63d48;
  --shadow-low: 0 1px 3px rgb(15 23 42 / 6%);
  --shadow-menu: 0 10px 28px rgb(15 23 42 / 14%);
  --control-height: 36px;
  --control-height-compact: 34px;
  --control-radius: 6px;
  --control-font-size: 14px;
  --control-font-size-compact: 13px;
  --focus-outline: 3px solid rgb(11 114 133 / 32%);
  --focus-ring: 0 0 0 3px rgb(11 114 133 / 14%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #101318;
  --surface-panel: #181c22;
  --surface-soft: #20252d;
  --text-primary: #e8ebef;
  --text-muted: #aeb6bf;
  --text-faint: #8995a2;
  --border-default: #2c333d;
  --border-strong: #3b4550;
  --color-brand-ink: #0e5965;
  --color-brand: #55bdc8;
  --color-brand-strong: #6dccd5;
  --color-brand-soft: #17363c;
  --status-success: #6ccd9c;
  --status-warning: #f3b66a;
  --status-danger: #ef959d;
  --shadow-low: none;
  --shadow-menu: 0 12px 30px rgb(0 0 0 / 32%);
  --focus-outline: 3px solid rgb(85 189 200 / 34%);
  --focus-ring: 0 0 0 3px rgb(85 189 200 / 18%);
}