/* Design tokens — the single source of truth for this site's look.
   Never hard-code a hex, a font name, or a px value these tokens already carry.

   Colour ramps were generated in OKLCH on one shared perceptual lightness
   scale, then gamut-mapped into sRGB by reducing chroma until each step was
   representable. That is why the light steps are desaturated rather than the
   neon cyan a naive lightening produces.

   Contrast is asserted by tests/Unit/DesignTokenContrastTest.php. Retune here
   and the suite will tell you if a pairing stopped being legible. */

:root {
  /* ── Ground and ink ─────────────────────────────────────────────────────
     Concrete grey, not the cream of the approved mockup. This contractor's
     signature work is concrete — spall repair, two-pour slabs, retaining
     walls, canopies set on new concrete — and a warm cream ground fights the
     cold brand blue that replaced the mockup's terracotta. */
  --concrete: #E7E7E4;   /* page ground */
  --paper:    #F6F6F4;   /* raised cells, cards, form panels */
  --ink:      #0D1A24;   /* dark bands, headings on light    14.24:1 on ground */

  /* ── Ocean ramp — anchored so step 500 IS the logo blue ──────────────── */
  --ocean-100: #E7F6FF;
  --ocean-200: #C2EAFF;
  --ocean-300: #98D2F1;  /* eyebrows and labels on ink       10.77:1 on ink */
  --ocean-400: #64B1D8;
  --ocean-500: #058EBF;  /* THE brand colour. DISPLAY ONLY —  3.01:1 on ground */
  --ocean-600: #006D93;  /* primary button fill; paper on it  5.38:1 */
  --ocean-700: #005777;  /* accent text at body size          6.45:1 on ground */
  --ocean-800: #003C54;
  --ocean-900: #002434;

  /* ── Ink ramp ────────────────────────────────────────────────────────── */
  --ink-100: #F2F4F5;
  --ink-200: #E0E3E6;
  --ink-300: #C5C9CD;
  --ink-400: #A1A7AC;    /* secondary text on ink             7.26:1 on ink */
  --ink-500: #7C848A;
  --ink-600: #5A646C;    /* secondary text on light           4.88:1 on ground
                            nudged darker than the pure OKLCH step (#616A72,
                            4.45:1) so it clears AA */
  --ink-700: #475159;
  --ink-800: #2D3841;
  --ink-900: #16222C;

  /* ── Semantic aliases — prefer these in component CSS ─────────────────
     They encode where each colour is legal, so the display-only rule on the
     brand blue cannot be broken by accident. */
  --brand:        var(--ocean-500);  /* >=24px text, tab fills, tags, icons, rules */
  --brand-fill:   var(--ocean-600);  /* solid fills carrying light text */
  --brand-text:   var(--ocean-700);  /* accent text at any size */
  --label-on-ink: var(--ocean-300);
  --muted:        var(--ink-600);
  --muted-on-ink: var(--ink-400);
  --rule:         color-mix(in srgb, var(--ink) 18%, transparent);
  --rule-on-ink:  color-mix(in srgb, var(--paper) 16%, transparent);
  --danger:       #B3261E;
  /* The same message on an ink band. --danger is ~2:1 on --ink, so a
     validation error on the enquiry form — which sits on .band--ink —
     was effectively unreadable in the one place it has to be read. */
  --danger-on-ink: #F2B8B5;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-display-xl: clamp(46px, 7.2vw, 104px);
  --size-display-l:  clamp(34px, 4.4vw, 62px);
  --size-display-m:  clamp(30px, 3.4vw, 48px);
  --size-heading:    clamp(26px, 2.4vw, 32px);
  --size-subhead:    21px;
  --size-body-l:     clamp(17px, 1.5vw, 21px);
  --size-body:       16px;
  --size-caption:    13.5px;
  --size-eyebrow:    11px;
  --size-label:      10px;
  --size-data:       14px;

  --track-display: -0.035em;
  --track-heading: -0.03em;
  --track-eyebrow: 0.22em;
  --track-label:   0.18em;

  /* ── Space — the approved design's 110px section rhythm at --space-14 ── */
  --space-1: 4px;    --space-2: 8px;    --space-3: 12px;   --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-7: 28px;   --space-8: 32px;
  --space-9: 40px;   --space-10: 48px;  --space-11: 64px;  --space-12: 72px;
  --space-13: 96px;  --space-14: 110px;

  /* ── Structure ───────────────────────────────────────────────────────── */
  --measure: 1320px;
  --gutter: 40px;
  --radius: 0;      /* zero everywhere, on purpose. Do not round a corner. */
  --hairline: 1px;
  --header-height: 76px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 220ms;
}