/* ============================================================================
   DESIGN TOKENS — this file IS the restyling surface. Change the look of the
   whole site here; components.css consumes only these variables.

   Rules of thumb:
   - Realise the plan's Design section by SETTING these values (palette hexes,
     the display/body pairing, radius, spacing feel) — then go further in
     app.css for layout, sections, hero art direction and signature elements.
   - Every padding/margin/gap you write anywhere should be a --space-* step.
     One scale, applied everywhere, is what makes a site feel finished.
   - --accent-ink is the text color ON accent surfaces (buttons). Keep it
     readable against --accent at WCAG AA (4.5:1) — the audit checks it.
   ========================================================================== */
:root {
  /* Color — semantic, not decorative. The starter look is deliberately plain:
     replace ALL of these per the plan's palette. */
  --bg: #F5F7F6;          /* soft Nordic tile mist page background */
  --bg-2: #FFFFFF;        /* raised surfaces: panels, cards, white subway tile */
  --text: #1F2A2E;        /* deep slate body ink */
  --muted: #495C64;       /* secondary ink — > 5:1 on --bg and --bg-2 */
  --accent: #7FB3C8;      /* calm Nordic bathhouse water blue */
  --accent-ink: #1F2A2E;  /* dark ink ON --accent buttons — 6.6:1 contrast */
  --border: #D8DFE2;
  --border-warm: #E4D3B8;
  --error: #9f1c1c;

  /* Nav — solid by default so the header is never invisible over a dark hero.
     For an overlay/transparent nav, set these deliberately AND make sure the
     nav ink works against what sits behind it at scroll position 0. */
  --nav-bg: var(--bg);
  --nav-ink: var(--text);

  /* Type — pick a characterful display face + a readable body face per the
     plan. Never ship the browser default on a finished site. */
  --font-display: 'Comfortaa', cursive, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --leading: 1.6;

  /* Fluid type scale. Projects may tune the endpoints, but every public page
     should use the scale rather than accumulating one-off font sizes. */
  --text-sm: clamp(.875rem, .84rem + .14vw, .95rem);
  --text-base: clamp(1rem, .96rem + .16vw, 1.08rem);
  --text-lead: clamp(1.1rem, 1.01rem + .35vw, 1.3rem);
  --text-h3: clamp(1.2rem, 1.08rem + .45vw, 1.5rem);
  --text-h2: clamp(1.75rem, 1.42rem + 1.2vw, 2.5rem);
  --text-h1: clamp(2.35rem, 1.85rem + 2.2vw, 4.25rem);
  --leading-tight: 1.1;
  --leading-heading: 1.22;
  --measure-copy: 68ch;
  --measure-lead: 58ch;

  /* Spacing scale — THE source of every padding/margin/gap in the site. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  /* Layout rhythm — sections and the footer inset/breathe via these, so
     content can never sit flush against the viewport edge. */
  --container-narrow: 32rem;
  --container-copy: 46rem;
  --container-wide: 74rem;
  --container-max: var(--container-wide);
  --container-pad: var(--space-5);    /* horizontal inset, every section+footer */
  --section-pad-y: var(--space-7);    /* vertical rhythm between sections */

  /* Interaction + media. Keep the focus color visible on both the page and
     accent surfaces; audit.js checks the rendered result. */
  --focus: #557887;
  --focus-offset: var(--bg);
  --control-min: 2.75rem;
  --media-radius: var(--radius);

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;
}