/*
 * Cedar & Nails — design tokens.
 * Verbatim from docs/cedar-nails-style-guide.md §7. The whole site reads from
 * these; nothing hard-codes a color, size, or spacing value. The UI is
 * strictly monochrome — black, white, grays, and translucent ink — so that
 * every drop of color on a page comes from a photograph.
 */
:root {
  /* color — monochrome only; photography carries all the color */
  --color-bg: #FFFFFF;
  --color-surface: #F4F4F2;      /* light-gray panels, secondary pill fill */
  --color-surface-2: #E9E9E6;    /* pill hover, deeper panel */
  --color-ink: #141413;          /* headlines, body — near-black, never #000 */
  --color-ink-soft: #6F6F6B;     /* secondary text, captions, meta */
  --color-line: #E5E5E2;         /* hairline rules where a divider is needed */
  --color-char: #1B1B1A;         /* dark sections, footer */
  --color-ink-inverse: #F6F6F4;  /* text on dark */
  --color-btn-dark: #3E3E3A;     /* the one dark pill per viewport */
  --color-btn-dark-hover: #2A2A27;
  --glass: rgba(24, 24, 23, 0.55); /* translucent chrome over photography */

  /* type */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif; /* display first-lines + quotes */
  --text-hero: clamp(2.5rem, 6vw, 4rem);
  --text-h2: clamp(2rem, 4vw, 2.5rem);
  --text-h3: clamp(1.375rem, 2.5vw, 1.625rem);
  --text-body-lg: clamp(1.125rem, 1.5vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-meta: 0.8125rem;

  /* layout & shape */
  --max-content: 1200px;
  --max-prose: 65ch;
  --section-pad: clamp(4rem, 10vw, 8rem);
  --radius-pill: 999px;  /* buttons, segmented controls */
  --radius-l: 24px;      /* photo cards, modal */
  --radius-m: 12px;      /* small cards, modal rows */
}