/* ==========================================================================
   Wild Made — design tokens
   Single source of truth. Nothing below this file should hard-code a value.
   Palette is locked per brand guidelines v1.0 — do not add colours.
   ========================================================================== */

:root {
  /* --- Colour: locked (from logo) ------------------------------------- */
  --paper:        #FFFFFF;
  --ink:          #1A1A18;
  --teal:         #1D9E75;

  /* --- Colour: extended (web UI) -------------------------------------- */
  --teal-tint:    #E7F5EF;
  --border:       #E3E2DE;
  --muted:        #6B6B67;

  /* --- Colour: accessible text variant -------------------------------- *
   * --teal on --paper measures 3.39:1 — below WCAG AA (4.5:1) for normal
   * text, and white-on-teal fails the same way. --teal-deep holds the exact
   * same hue (160.9deg) and saturation, darkened until it clears 4.5:1 on
   * BOTH --paper (5.30:1) and --teal-tint (4.72:1). Used ONLY for:
   *   - teal text below ~24px
   *   - text sitting on a teal or teal-tint background
   * Everything decorative (pixel mark, cursor, accent bar, borders, rules,
   * large display type) keeps --teal exactly as locked.
   * Verify with: python3 tools/contrast.py
   * -------------------------------------------------------------------- */
  --teal-deep:    #167A59;

  /* Surfaces */
  --surface:      #FAFAF8;

  /* --- Type ------------------------------------------------------------ */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Space Grotesk is scoped to .wordmark ONLY. Never reference it elsewhere. */
  --font-wordmark: 'Space Grotesk', var(--font-mono);

  --fs-h1:      clamp(2rem, 1.35rem + 2.6vw, 3rem);      /* 32 → 48 */
  --fs-h2:      clamp(1.5rem, 1.25rem + 1.0vw, 2rem);    /* 24 → 32 */
  /* JetBrains Mono runs ~30% wider per character than a proportional face, so
     at a given size it reads smaller and scans slower. The typeface is locked
     by the brand guidelines and is not in question — the sizes are raised
     instead, and --measure comes down to keep the line length short. */
  --fs-h3:      0.875rem;                                 /* 14, uppercase, tracked */
  --fs-body-lg: 1.125rem;                                 /* 18 */
  --fs-body:    1.0625rem;                                /* 17 */
  --fs-sm:      0.9375rem;                                /* 15 — secondary copy in cards/steps */
  --fs-ui:      0.875rem;                                 /* 14 — buttons, labels */
  --fs-caption: 0.8125rem;                                /* 13 */

  --lh-tight:  1.15;
  --lh-heading: 1.2;
  --lh-body:   1.6;

  --tracking-label: 0.06em;

  /* --- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* --- Layout ---------------------------------------------------------- */
  --measure: 55ch;         /* readable line length for body copy */
  /* Minimum touch target. WCAG 2.2 AA (2.5.8) asks 24px; 44px is the Apple/
     Google figure and the one this site argues for, so it uses that. */
  --tap: 44px;
  --wrap:    1080px;
  --wrap-narrow: 720px;
  --gutter:  clamp(1.25rem, 0.75rem + 2vw, 2rem);

  /* --- Radius / lines --------------------------------------------------- */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;
  --hairline: 1px solid var(--border);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.15, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 600ms;

  --focus-ring: 2px solid var(--teal-deep);
  --focus-offset: 3px;
}

/* Motion is opt-out at the token level so every transition respects it. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}