:root {
  /* Task 2 — semantic tokens. Legacy aliases kept so existing rules resolve. */
  --color-bg: #f7f8f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f3f2;
  --color-surface-warm: #f6f2ea;
  --color-surface-cool: #eef3f7;
  --color-surface-dark: #151b19;
  --color-surface-dark-2: #1b2320;

  --color-text: #18201d;
  --color-text-muted: #58635e;
  /* Was #7a8580 — 3.6:1 on --color-bg, under the 4.5:1 floor. This is 4.8:1. */
  --color-text-faint: #656f6b;
  --color-text-on-dark: #f3f6f4;
  --color-text-muted-on-dark: #aeb8b3;
  --color-text-faint-on-dark: #7f9498;
  --color-link-on-dark: #d9e3e4;
  --color-header: #102126;

  --color-brand: #167a55;
  --color-brand-dark: #0c5039;
  --color-brand-soft: #e8f4ee;

  --color-info: #3569c8;
  --color-info-soft: #edf3fc;
  --color-warning: #c78528;
  --color-warning-soft: #fff5e6;
  --color-danger: #c84c4c;
  --color-danger-soft: #fceeee;
  --color-special: #6658b8;
  --color-special-soft: #f0eefa;

  --border-default: #d5dbd6;
  --border-active: var(--color-brand);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-product: 0 18px 50px rgb(21 27 25 / .14);
  --shadow-floating: 0 12px 32px rgb(21 27 25 / .12);
  --shadow-none: none;

  --bg: var(--color-bg);
  --bg-soft: var(--color-surface-alt);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-alt);
  --ink: var(--color-text);
  --ink-2: #24302c;
  --muted: var(--color-text-muted);
  --muted-2: var(--color-text-faint);
  --line: var(--border-default);
  --line-strong: #c3cac5;
  --brand: var(--color-brand);
  --brand-dark: var(--color-brand-dark);
  --brand-soft: var(--color-brand-soft);
  --brand-pale: var(--color-brand-soft);
  --success: var(--color-brand);
  --warn: var(--color-warning);
  --danger: var(--color-danger);
  --dark: var(--color-surface-dark);
  --dark-2: var(--color-surface-dark-2);
  --dark-muted: var(--color-text-muted-on-dark);
  --focus: var(--color-info);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --display: clamp(2rem, 3.6vw, 2.85rem);
  --h1: clamp(1.75rem, 2.7vw, 2.35rem);
  --h2: clamp(1.4rem, 2.1vw, 1.8rem);
  --h3: 1.125rem;
  --body-lg: 1.0625rem;
  --body: 0.9375rem;
  --small: 0.8125rem;
  --tiny: 0.7rem;

  --s1: .35rem;
  --s2: .6rem;
  --s3: .9rem;
  --s4: 1.2rem;
  --s5: 1.6rem;
  --s6: 2.2rem;
  --s7: 3rem;
  --s8: 3.5rem;
  --s9: 5rem;
  --s10: 6.25rem;

  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: 14px;
  --shadow-sm: none;
  --shadow-md: var(--shadow-floating);
  --wrap: 74rem;
  --wrap-wide: 82rem;
  --measure: 42rem;
  --header: 4rem;
  --motion: 280ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 700px) {
  :root { --s9: 3.4rem; --s10: 4.2rem; --header: 3.75rem; }
}

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