/* Homebase design system. Semantic tokens are the shared visual contract. */
:root {
  --color-canvas: #f7f8f5;
  --color-surface: #ffffff;
  --color-sidebar: #fdfefa;
  --color-text: #26382f;
  --color-muted: #637268;
  --color-border: #dfe5de;
  --color-border-strong: #b8cbb9;
  --color-subtle: #edf0e9;
  --color-accent: #345e48;
  --color-accent-hover: #294c39;
  --color-accent-soft: #e9f0e3;
  --color-accent-text: #2c543b;
  --color-focus: #356ac3;
  --color-favorite: #95702c;
  --color-danger: #963d2f;
  --color-danger-soft: #fff0eb;
  --color-success: #345e48;
  --color-success-soft: #eef5f0;

  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-display: 2.875rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-control: 10px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 3px #2a422a03;
  --shadow-hover: 0 12px 28px #263e3410;
  --focus-ring: 0 0 0 3px #356ac326;
  --duration-fast: 150ms;
  --control-height: 44px;
  --sidebar-width: 245px;
  --bg: var(--color-canvas);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --border: var(--color-border);
  --accent: var(--color-accent);
  --font: var(--font-body);
}