/* Steady Dog Co. design tokens (v1, 18 Oct 2026). The single source for colour, type and spacing.
   The site copies this file at build time; the brand board links it. See _brand/README.md.

   Fonts (OFL), loaded from Google Fonts by each page:
   https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,wght@100,400..700&family=Mona+Sans:wdth,wght@100..125,400..900&display=swap */

:root {
  /* Colour: named for the world they come from. Ratios checked (WCAG):
     ink/chalk 16.6, chalk/green 9.1, ink/orange 5.8, orange/ink 5.8, orange/chalk 2.85 (decoration only, never text). */
  --ink: #14171A;          /* text, dark bands, the black strap */
  --chalk: #F6F6F3;        /* the page */
  --concrete: #E6E6E1;     /* footpath grey: panels, rules */
  --line: #D3D3CC;
  --grey: #5B6168;         /* secondary text on chalk (5.8) */
  --on-dark: #B9C0C6;      /* secondary text on ink (9.8) and on green (5.3) */
  --paper: #FFFFFF;        /* cards, tiles and form fields on chalk */
  --alert: #B3261E;        /* errors and safety notes only */
  --green: #0E4D3A;        /* park green: brand bands, trust, Steady Anywhere */
  --green-2: #0A3A2C;
  --orange: #FF5C1A;       /* lead orange: the lead line, the clip, button fills (ink text only) */
  --orange-2: #E84D0E;
  --blue: #2F5BFF;         /* strap blue: Steady Walks */
  --pink: #FF6EA9;         /* strap pink: Walk Club */

  /* Type */
  --display: "Mona Sans", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --text: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --wide: 125;             /* display width axis */
  --fs-display: clamp(3.4rem, 8.2vw, 8rem);
  --fs-h1: clamp(2.8rem, 6.4vw, 5.6rem);
  --fs-h2: clamp(2.1rem, 4.2vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 1.6vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1.2vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.75rem;

  /* Shape and space: square photos and cards, round only where a real object is round (buttons like a lead's handle, the clip) */
  --radius-pill: 999px;
  --stroke: 2px;
  --lead-w: 7px;           /* the lead line on screen */
  --gutter: max(20px, 4vw);
  --section: clamp(72px, 10vw, 140px);
  --max: 1320px;
}