/*
  AMORETTI — DESIGN TOKENS
  ------------------------
  Palette is derived from the brief's material direction (warm off-white,
  charcoal, black, natural timber, muted neutrals) and grounded in the
  actual timbers Amoretti works in: Oak, Teak, Meranti, Kiaat.

  The accent is a mid oak/teak brown, deliberately NOT the warm terracotta
  (#D97757-family) common in generic AI-generated design — it sits closer
  to raw and oiled timber than to a marketing-orange.

  Type pairs a restrained display serif (Fraunces) with a humanist grotesk
  body (Public Sans) and a monospace utility face (IBM Plex Mono) used for
  "drawing title block" style annotations — species names, dimensions,
  project metadata — echoing the architectural / joinery drawings this
  business is actually built around.
*/

:root {
  /* ---- Color: surfaces ---- */
  --color-canvas: #F5F1E7;        /* warm off-white — limewash plaster */
  --color-canvas-deep: #ECE5D3;   /* deeper section background */
  --color-ink: #1A1712;           /* near-black — oiled timber, not pure black */
  --color-charcoal: #35302A;      /* secondary dark, headings on light */

  /* ---- Color: timber accent (used sparingly) ---- */
  --color-oak: #8A5A34;
  --color-oak-deep: #5B3A22;
  --color-oak-pale: #C9A87C;

  /* ---- Color: lines & muted neutrals ---- */
  --color-line: #CFC5AE;                     /* hairline on light bg */
  --color-line-dark: rgba(245, 241, 231, 0.2); /* hairline on dark bg */
  --color-muted: #6E6656;                     /* secondary text on light */
  --color-muted-dark: #B7AF9C;                /* secondary text on dark */

  /* ---- Type families ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Type scale (fluid) ---- */
  --size-hero: clamp(2.75rem, 3.2vw + 2rem, 5.5rem);
  --size-h1: clamp(2.25rem, 2vw + 1.6rem, 3.75rem);
  --size-h2: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);
  --size-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --size-body-lg: 1.1875rem;
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-label: 0.75rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;
  --space-3xl: 13rem;

  /* ---- Layout ---- */
  --measure: 38rem;              /* comfortable reading width */
  --measure-wide: 52rem;
  --container-max: 90rem;
  --edge: clamp(1.25rem, 4vw, 4rem); /* page edge gutter */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-med: 400ms;
  --duration-slow: 550ms;

  /* ---- Elevation / focus ---- */
  --focus-ring: 2px solid var(--color-oak);
  --focus-offset: 3px;
}