:root {
  color-scheme: light;

  /* Brand foundations. Only these two values are changed by the admin theme. */
  --color-brand: #102f2a;
  --color-accent: #2d7868;
  --color-accent-soft: #eaf2f0;

  /* Neutral foundations. */
  --color-canvas: #f6f4ed;
  --color-surface: #ffffff;
  --color-surface-muted: #eef1ed;
  --color-surface-strong: #e9eee8;
  --color-text: #17322e;
  --color-text-muted: #566863;
  --color-border: #d7dfda;
  --color-border-strong: #aebdb6;
  --color-on-brand: #ffffff;

  /* Semantic colors are intentionally independent from the editable brand. */
  --color-success: #1f6b55;
  --color-success-soft: #e1f1e9;
  --color-warning: #74530d;
  --color-warning-soft: #fff2c9;
  --color-danger: #962f2f;
  --color-danger-soft: #fbe7e7;
  --color-clinical: #4f3f70;
  --color-clinical-soft: #eee9f8;
  --color-focus: #176b5a;

  /* Schematic anatomy: contours and selection remain distinct from safety. */
  --color-muscle-available: var(--color-text-muted);
  --color-muscle-selected: var(--color-accent);
  --color-muscle-unavailable: var(--color-border-strong);
  --color-muscle-separator: var(--color-surface);
  --color-muscle-body: var(--color-surface-strong);

  /* Activity density is informational, never a safety or success signal. */
  --color-activity-1: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  --color-activity-2: color-mix(in srgb, var(--color-accent) 36%, var(--color-surface));
  --color-activity-3: color-mix(in srgb, var(--color-accent) 58%, var(--color-surface));
  --color-activity-4: var(--color-brand);

  /* Typography. */
  --font-body-system: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-humanist: "Trebuchet MS", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body-rounded: "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-heading-serif: Georgia, "Times New Roman", serif;
  --font-heading-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --line-height-body: 1.5;

  /* Spacing, shape, layout and motion. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-control: 0.75rem;
  --radius-card: 1.25rem;
  --radius-dialog: 1.5rem;
  --radius-pill: 999px;
  --layout-content: 1180px;
  --layout-admin: 1380px;
  --control-height: 44px;
  --shadow-card: 0 18px 48px rgba(18, 47, 42, 0.1);
  --shadow-focus: 0 0 0 3px rgba(23, 107, 90, 0.28);
  --motion-fast: 150ms ease;
  --motion-standard: 220ms ease;

  /* Backward-compatible aliases. New code uses the semantic names above. */
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --paper: var(--color-canvas);
  --card: var(--color-surface);
  --line: var(--color-border);
  --green: var(--color-accent);
  --deep: var(--color-brand);
  --mint: var(--color-accent-soft);
  --amber: #f2c978;
  --shadow: var(--shadow-card);
  --card-radius: var(--radius-card);
  --content-width: var(--layout-content);
}

body[data-font="system"] { font-family: var(--font-body-system); }
body[data-font="humanist"] { font-family: var(--font-body-humanist); }
body[data-font="rounded"] { font-family: var(--font-body-rounded); }
body[data-heading-font="serif"] :is(h1, h2, .display-heading) { font-family: var(--font-heading-serif); }
body[data-heading-font="sans"] :is(h1, h2, .display-heading) { font-family: var(--font-heading-sans); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}