/*
 * Fountain City Lights design tokens. Direction B, "Longleaf & Brass" (TCK-010, approved by Ben on 2026-11-04).
 * Source of truth: docs/design/visual/design-system.md. Contrast pairs are tested in tests/brand.test.js.
 */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-wght.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/work-sans-latin-wght.woff2") format("woff2");
}

:root {
  /* Colour: raw palette */
  --pine: #1e3b2f;
  --needle: #2f5a45;
  --brass: #c9a45c;
  --brass-deep: #7a5c1e;
  --linen: #f7f3ea;
  --bark: #4a3f35;

  /* Colour: roles (use these in components) */
  --color-surface: #f7f3ea;
  --color-text: #1e3b2f;
  --color-text-muted: #4a3f35;
  --color-accent-text: #7a5c1e;
  --color-link: #2f5a45;
  --color-dark: #1e3b2f;
  --color-dark-raised: #2f5a45;
  --color-on-dark: #f7f3ea;
  --color-accent: #c9a45c;
  --color-accent-hover: #d6b674;
  --color-on-accent: #1e3b2f;
  --color-border: #d9d0bd;
  --color-focus: #2f5a45;
  --color-focus-on-dark: #c9a45c;
  --color-input-bg: #fffdf8;
  --color-input-border: #7d725f;
  --color-error: #8f2a1d;
  --color-error-bg: #f6e9e4;
  --color-note-bg: #efe8d9;

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-display: 500;
  --weight-body: 400;
  --weight-strong: 600;
  --step-minus-1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --leading-tight: 1.1;
  --leading-body: 1.6;
  --tracking-label: 0.18em;
  --measure: 65ch;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --content-max: 72rem;

  /* Shape and motion */
  --radius: 0.25rem;
  --radius-l: 0.5rem;
  --border-width: 1px;
  --focus-width: 3px;
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}