/* Design Surrey — Modern County, palette B (ink first, brass edge)
   Adopted 26 Aug 2026. Supersedes the green-first palette in the original
   brand system: green is demoted from primary surface to a secondary accent,
   near-black becomes the field, and brass carries the signature edge.

   Rationale on file: deep desaturated green on cool off-white read as public
   sector. Warm neutrals + ink field + brass reads premium.

   Light is the default. .on-ink is a section modifier, not a theme. */

:root {
  /* ---- ink — the field and the type ---- */
  --ink-900: #0E0F0E;   /* headings */
  --ink-800: #12140F;   /* the field surface */
  --ink-700: #23241F;
  --ink-500: #4A4B47;   /* body — 8.0:1 on bone-50 */
  --ink-400: #5E5F59;
  --ink-300: #8A8B84;   /* 3.1:1 — rules, borders, dividers ONLY. Never text. */

  /* ---- bone — the page ---- */
  --bone-50:  #FBFAF7;  /* page */
  --bone-100: #F3F1EC;  /* surface */
  --bone-200: #EAE7DF;
  --bone-300: #DAD6CC;  /* borders */

  /* ---- brass — the signature ----
     brass-500 is a GRAPHIC colour: edges, rules, marks. 2.9:1, never text.
     brass-700 is the text weight on light. brass-300 is the text weight on ink. */
  --brass-700: #8A6410;  /* 5.2:1 on bone-50 — brass text on light */
  --brass-500: #B8873A;  /* the 8px edge, graphic use only */
  --brass-300: #C99B4E;  /* 8.1:1 on ink-800 — brass text on dark */
  --brass-100: #F0E4CE;  /* tint */

  /* ---- green — demoted to accent ---- */
  --green-700: #2A6152;  /* 6.1:1 on bone-50 — links, small marks */
  --green-500: #3B7A68;
  --green-200: #9CC0B5;  /* 9.2:1 on ink-800 — accent on dark */
  --green-50:  #E7EFEB;

  --danger: #8A2B1E;

  /* ---- semantic ---- */
  --page:    var(--bone-50);
  --surface: var(--bone-100);
  --border:  var(--bone-300);
  --rule:    var(--ink-300);
  --text:    var(--ink-500);
  --heading: var(--ink-900);
  --link:    var(--green-700);
  --accent:  var(--brass-700);
  --edge:    var(--brass-500);

  /* ---- type ---- */
  --font-sans:  'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --display-1: 88px; --display-1-lh: 0.98; --display-1-ls: -0.045em;
  --display-2: 66px; --display-2-lh: 0.98; --display-2-ls: -0.045em;
  --h1: 48px; --h1-lh: 1.02; --h1-ls: -0.04em;
  --h2: 34px; --h2-lh: 1.10; --h2-ls: -0.03em;
  --h3: 24px; --h3-lh: 1.20; --h3-ls: -0.02em;
  --lead: 20px; --body: 17px; --small: 15px; --label: 12px;

  /* ---- space ---- */
  /* The number is the multiple of 4px, so the scale is readable at a
     glance and any step can be derived rather than looked up.

     --s7 and --s10 were missing while thirty-nine declarations across the
     stylesheets and pages referenced them. A var() with no fallback and no
     definition makes the whole declaration invalid, so every one of those
     margins and paddings was silently collapsing to nothing — which is
     what most of the spacing complaints on the landing page turned out to
     be. They are not new steps; they are the two the scale always implied. */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;  --s6: 24px;
  --s7: 28px; --s8: 32px;  --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;
  --s32: 128px; --s48: 192px;

  /* ---- structure ---- */
  --radius: 0px;
  --radius-chip: 2px;
  --field-edge: 8px;
  --container: 1312px;
  --measure: 62ch;
  --gutter: 64px;
  --hit: 48px;

  --shadow-sm:   0 1px 2px rgba(14,15,14,0.06);
  --shadow-md:   0 2px 10px rgba(14,15,14,0.07);
  --shadow-lift: 0 14px 44px rgba(14,15,14,0.14);
}

@media (max-width: 1023px) { :root { --gutter: 48px; } }

@media (max-width: 767px) {
  :root {
    --gutter: 32px;
    --display-1: 56px; --display-2: 48px; --h1: 40px; --h2: 30px;
  }
}

@media (max-width: 519px) {
  :root {
    --gutter: 20px;
    --display-1: 44px; --display-2: 40px; --h1: 34px; --h2: 28px;
    --field-edge: 6px; --hit: 44px;
  }
}

/* ---- dark sections: hero field, process, footer, social, proposal covers ---- */
.on-ink {
  --page:    var(--ink-800);
  --surface: var(--ink-800);
  --border:  rgba(251,250,247,0.16);
  --rule:    rgba(251,250,247,0.22);
  --text:    #CFCEC5;
  --heading: var(--bone-50);
  --link:    var(--brass-300);
  --accent:  var(--brass-300);
}