:root {
  color-scheme: light;
  --canvas: var(--brand-color-canvas); --surface: var(--brand-color-white);
  --ink: var(--brand-color-ink); --muted: var(--brand-color-muted);
  --line: #d6d4cd; --primary: var(--brand-color-blue); --primary-hover: #174fcf;
  --primary-soft: #eef2ff; --focus: var(--brand-color-blue);
  --teal: #12624b; --teal-soft: #e0f8ed; --yellow: var(--brand-color-yellow);
  --yellow-soft: #fff4c8; --coral: var(--brand-color-coral); --coral-soft: #ffe6e3;
  --danger: #a32d25; --success: #12624b; --warning: #694b00;
  --radius: 10px; --panel-radius: 10px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
}