:root {
  --color-background: #f8faf4;
  --color-surface: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4ee;
  --color-surface-container: #edefe8;
  --color-surface-container-high: #e7e9e3;
  --color-surface-container-highest: #e1e3dd;
  --color-surface-dim: #d9dbd5;
  --color-surface-soft: var(--color-surface-container-low);
  --color-surface-tertiary: var(--color-surface-container-highest);
  --color-primary: #7a8c6f;
  --color-primary-strong: #506147;
  --color-primary-container: #687a5e;
  --color-primary-fixed: #d5e9c7;
  --color-primary-fixed-dim: #b9ccac;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #f8ffee;
  --color-on-primary-fixed: #111f0a;
  --color-primary-contrast: var(--color-on-primary);
  --color-text: #191c19;
  --color-text-muted: #444840;
  --color-on-background: var(--color-text);
  --color-on-surface: var(--color-text);
  --color-on-surface-variant: var(--color-text-muted);
  --color-surface-variant: var(--color-surface-container-highest);
  --color-border: #c4c8be;
  --color-border-strong: #75786f;
  --color-outline: var(--color-border-strong);
  --color-outline-variant: var(--color-border);
  --color-danger: #ba1a1a;
  --color-danger-surface: #ffdad6;

  --color-primary-hover: #4a5941;
  --color-accent: var(--color-surface-container-highest);
  --color-accent-soft: var(--color-surface-container-low);

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  --shell-sidebar-width: 256px;
  --shell-mobile-margin: var(--space-16);
  --shell-desktop-gutter: var(--space-48);
  --shell-topbar-height: 56px;
  --shell-mobile-header-height: 56px;
  --shell-dock-height: 72px;

  --radius-field: 8px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-family: var(--font-body);
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-label: 0.75rem;
  --tracking-label: 0.05em;
  --font-size-display: 3rem;
  --font-size-headline: 2rem;
  --font-size-headline-md: 1.5rem;
  --font-size-headline-sm: 1.25rem;
  --font-size-headline-mobile: 1.75rem;

  --focus-ring: 2px solid var(--color-primary-strong);
}