:root {
  /* HOSA foundations — keep raw brand colours separate from semantic usage. */
  --color-hosa-green: #021713;
  --color-hosa-ivory: #f4efe6;
  --color-hosa-gold: #c6a15b;
  --color-canvas: #eeebe3;
  --color-surface: #faf8f3;
  --color-surface-muted: #f3f0e9;
  --color-text: #11231f;
  --color-text-muted: #586560;
  --color-text-on-dark: #f4efe6;
  --color-border: #d7d8d0;
  --color-border-dark: rgba(244, 239, 230, 0.16);
  --color-border-subtle: rgba(2, 23, 19, 0.12);
  --color-green-soft: #0a2a22;
  --color-success: #2e765a;
  --color-warning: #956b22;
  --color-danger: #a84137;
  --color-info: #356b7d;
  --surface-base: var(--color-canvas);
  --surface-raised: var(--color-surface);
  --surface-inset: var(--color-surface-muted);
  --surface-interactive: #f8f5ee;
  --surface-selected: #f5eedc;
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-on-strong: var(--color-text-on-dark);
  --border-subtle: var(--color-border-subtle);
  --border-strong: var(--color-border);
  --action-primary: var(--color-hosa-green);
  --action-primary-hover: var(--color-green-soft);
  --focus-ring: rgba(198, 161, 91, .28);
  --status-success-bg: #eff7f1;
  --status-warning-bg: #fbf7ec;
  --status-danger-bg: #fdf2f0;
  --status-info-bg: #f0f6f7;
  --font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --sidebar-width: 240px;
  --topbar-height: 82px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --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;
  --space-16: 64px;
  --z-base: 0;
  --z-sticky: 10;
  --z-menu: 20;
  --z-overlay: 30;
  --z-dialog: 40;
  --z-toast: 50;
  --motion-hover: 120ms;
  --motion-menu: 140ms;
  --motion-overlay: 190ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --transition-fast: var(--motion-hover) var(--ease-standard);
  --transition-slow: var(--motion-overlay) var(--ease-standard);
  --shadow-overlay: 0 10px 28px rgba(2, 23, 19, .12);
  --shadow-raised: 0 1px 2px rgba(2, 23, 19, .035), 0 8px 24px rgba(2, 23, 19, .045);
}