/*
 * THE `www` KIT'S OWN STYLESHEET: www.autom8ion.uk, the platform's own sales
 * site. THE DESIGNER'S FILE. (19 Oct 2026; reviewed and applied 20 Oct 2026
 * with two changes, marked REVIEW below.)
 *
 * Load order is site.css, sf-vertical.css, THIS FILE, then a11y.css last.
 * site.css and sf-vertical.css belong to the demonstrations and are not
 * edited for www; everything www changes happens here. How a change reaches
 * the site: a commit to this file, reviewed by the owner, deployed with the
 * Worker (SETUP_GUIDE 82.7, SPEC_STOREFRONT 7.2.1).
 *
 * WHAT CHANGED AND WHY
 * The neutral starting point left --brand #1f2937 and --brand-deep #111827,
 * both near-black, so every `.band` section painted a black slab across the
 * page and the site read as dark. Worse, a form inside a band kept its
 * ordinary label colour (--ink-soft #4b5563) on that black: 2.35:1, where
 * AA asks 4.5:1. Every field label on /contact was effectively unreadable.
 *
 * So: a real palette, and `.band` is now a light surface rather than an
 * inversion. site.css sets white text inside a band explicitly (a tenant
 * token changing under it is how white-on-white happens), so each of those
 * five rules is answered below at the same specificity.
 *
 * THE RULES THIS FILE KEEPS (they are what make the seven accessibility
 * looks and Follow my system work):
 *   1. Colours only through the tokens. Nothing below types a colour into a
 *      rule; a11y.css maps every theme onto these names.
 *   2. Type in rem or em, never px, so Large Text and browser zoom scale it.
 *   3. Motion only through transition/animation, which a11y.css can stop.
 *   4. Every text pair 4.5:1 or better. Measured values are in the comment
 *      beside each token; the lowest pair in this file is 5.81:1.
 *      test/hosts.test.mjs measures the tokens and fails naming the pair.
 *
 * Fonts stay as the kit serves them (Inter, from /shared/fonts/). No font
 * CDN: it would send every visitor's address to a third party before any
 * consent, and font-src 'self' refuses it anyway.
 */

:root {
  /* Text and surfaces. Ratios are against --paper unless stated. */
  --ink: #16202e;          /* 16.40:1 on paper, 15.26:1 on paper-warm        */
  --ink-soft: #4a5a6e;     /*  7.05:1 on paper,  6.56:1 on paper-warm        */
  --paper: #ffffff;
  --paper-warm: #f4f7fa;   /* the band surface, and alternating sections     */
  --line: #d7dee7;         /* borders only, never text                       */

  /* Brand. Blue rather than near-black: the old values made every band a
     black slab. Change these two lines to re-colour the site.              */
  --brand: #0b5ea8;        /*  6.60:1 on paper; white on it 6.60:1           */
  --brand-deep: #0a3f70;   /*  white on it 10.73:1 — kept for a rare true
                               inversion, no longer the default band        */

  --accent: #1d4ed8;       /*  6.70:1 on paper; white on it 6.70:1           */
  --accent-soft: #eaf1fb;  /*  ink 14.43:1, ink-soft 6.20:1, brand 5.81:1    */
  --ok: #166534;           /*  7.13:1 on paper; white on it 7.13:1           */

  --font: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--font);
}

/* ---------------------------------------------------------------------- *
 * THE BAND, MADE LIGHT
 * site.css: `.band { background: var(--brand-deep); color: #fff }` plus four
 * rules that set white explicitly. Each is answered here at matching
 * specificity so nothing is left white on a light surface.
 * ---------------------------------------------------------------------- */
.band { background: var(--paper-warm); color: var(--ink); }
.band h2, .band h3 { color: var(--ink); }
.band .lede, .band p { color: var(--ink-soft); }
.band .btn-quiet { border-color: var(--line); color: var(--brand); }
.band .btn-quiet:hover { background: var(--accent-soft); }
.band .kicker { color: var(--brand); }

/* A band and the section after it would otherwise meet as two flat greys. */
.band + .band { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------- *
 * FORMS
 * Labels were the unreadable pair. On a light band --ink-soft is 6.56:1,
 * but they are also small, so they are raised to 0.875rem — in rem, so
 * Large Text still scales them.
 * ---------------------------------------------------------------------- */
label { color: var(--ink-soft); font-size: 0.875rem; letter-spacing: 0.01em; }

input, select, textarea {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 1rem;
  min-height: 2.75rem;          /* 44px at default size: the owner's target */
  padding: 0.5rem 0.75rem;
}
textarea { min-height: 8rem; }
input::placeholder, textarea::placeholder { color: var(--ink-soft); }
input:hover, select:hover, textarea:hover { border-color: var(--brand); }

/* ---------------------------------------------------------------------- *
 * BUTTONS AND TARGETS
 * Every control clears 44x44 and carries its own text colour, so a button
 * never inherits a surface's colour and vanishes.
 * ---------------------------------------------------------------------- */
.btn, button, [type="submit"], [type="button"] {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  border-radius: 2rem;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn, [type="submit"] { background: var(--brand); color: var(--paper); border: 1px solid var(--brand); }
.btn:hover, [type="submit"]:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-quiet { background: transparent; color: var(--brand); border: 1px solid var(--line); }
/* REVIEW (20 Oct 2026): `.btn:hover` above is more specific than
   `.btn-quiet`, so a quiet button outside a band turned --brand text on
   --brand-deep on hover (unreadable). Its hover is now its own, everywhere. */
.btn.btn-quiet:hover { background: var(--accent-soft); color: var(--brand); border-color: var(--line); }
.btn-teal { background: var(--accent); color: var(--paper); border: 1px solid var(--accent); }

/* ---------------------------------------------------------------------- *
 * FOCUS
 * One visible ring everywhere, on a token so High Contrast can recolour it.
 * ---------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------- *
 * EMPTY WORD SLOTS
 * The kit draws every `data-w` slot whether or not the tenancy has filled
 * it, so an unfilled one leaves an empty heading or paragraph. (The contact
 * page's empty side panel and its /lizzie link are no longer drawn at all,
 * 20 Oct 2026.) This hides any slot with nothing in it.
 * ---------------------------------------------------------------------- */
[data-w]:empty { display: none; }

/* ---------------------------------------------------------------------- *
 * TYPE
 * Sizes in rem throughout. The display face is the body face; weight and
 * measure do the work instead of a second family.
 * ---------------------------------------------------------------------- */
h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p, li { font-size: 1.0625rem; line-height: 1.6; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); }
/* REVIEW (20 Oct 2026): scoped to the page's content. The masthead row is a
   .wrap too, and an unscoped rule pushed the menu 1rem below the logo. */
main .wrap > * + * { margin-top: 1rem; }

a { color: var(--brand); text-underline-offset: 0.15em; }
a:hover { color: var(--brand-deep); }