/* ============================================================
   Service Works Plus design tokens
   Source of truth: notes/design-direction.md (approved 2026-06-12)
   Every page on this site imports this file first.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --ink: #1a1c1e;            /* headings/body on light; dark-band base */
  --surface-dark: #23262a;   /* panels inside dark bands */
  --paper: #f6f5f2;          /* page background */
  --surface: #ffffff;        /* cards on paper */
  --line: #ddd9d2;           /* hairline rules, photo frames */
  --line-dark: #2e3236;      /* hairlines on dark bands */
  --text-secondary: #5b6066; /* secondary text on light (AA on paper) */
  --text-inverse: #f3f2ef;   /* body text on dark bands */
  --accent: #e8842d;         /* logo orange: UI marks, dark-surface text. <=10% of viewport */
  --accent-deep: #a85410;    /* orange TEXT on light surfaces (AA). Never white on orange. */
  --success: #2e7d32;
  --error: #b3261e;

  /* ---- Type ---- */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Scale: mobile -> desktop via clamp (design-direction.md §2) */
  --fs-display: clamp(2.5rem, 1.55rem + 4vw, 4rem);      /* 40 -> 64 */
  --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);       /* 36 -> 56 */
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);      /* 28 -> 40 */
  --fs-h3: clamp(1.25rem, 1.16rem + 0.4vw, 1.625rem);    /* 20 -> 26 */
  --fs-body-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-label: clamp(0.8125rem, 0.8rem + 0.05vw, 0.875rem);
  --fs-caption: 0.8125rem;

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

  /* ---- Space (8px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Section rhythm: 64 mobile -> 96 desktop */
  --section-pad: clamp(var(--s-8), 5vw + 32px, var(--s-9));

  /* ---- Layout ---- */
  --container: 1120px;
  --gutter: clamp(24px, 4vw, 40px);

  /* ---- Shape & misc ---- */
  --radius: 2px;
  --photo-max: 480px;        /* HARD CEILING: photos never render wider (§5) */
  --tap-min: 44px;
  --transition: 180ms ease-out;
}