/* Design tokens. Shared across the Innovate house system; brand name comes from config.json.
   Source of truth: reference/brand/brand-innovate-build-co.md
   Every value here is measured and recorded in that document. Do not add a
   colour without adding its contrast ratios to the table in the brand doc. */

:root {

  /* ---- Brand palette ---- */

  --navy:        #1B2A41;  /* mark, headings, links, primary button */
  --navy-lift:   #2C4460;  /* primary button hover. Lifts, never darkens */
  --ink:         #2B2B2B;  /* body copy */
  --ink-2:       #5F5B52;  /* secondary text, ALL light grounds. 6.76:1 on white */
  --brand-grey:  #8A8578;  /* BRAND AND NON-TEXT ONLY. 3.68:1 on white, fails AA */
  --panel:       #F0EDE6;  /* panels and backgrounds */
  --white:       #FFFFFF;
  --urgent:      #8A4B10;  /* time-critical only: discharge dates, expiring quotes */

  /* --brand-grey is permitted in the logotype descriptor and as rules,
     keylines and dividers at the 3:1 non-text threshold.
     NEVER body copy, captions, labels, form hints or placeholder text. */

  /* ---- Semantic ---- */

  --bg:              var(--white);
  --bg-panel:        var(--panel);
  --text:            var(--ink);
  --text-secondary:  var(--ink-2);
  --heading:         var(--navy);
  --rule:            var(--brand-grey);

  /* ---- Type ---- */

  --font: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --w-regular: 400;
  --w-semibold: 600;
  --measure: 65ch;

  /* ---- Focus ring ----
     Two parts, ALWAYS both, on every surface. No single colour clears
     4.5:1 on white AND 3:1 on navy: the luminance windows do not overlap
     once the panel colour is included. Proof is in the brand doc. */

  --focus-inner: var(--white);
  --focus-outer: var(--navy);

  /* ---- On navy ---- */

  --on-navy:        #F0EDE6;   /* text on navy ground. Measure and record in the brand doc: expected ~12:1 */
  --on-navy-muted:  #B9B3A6;   /* secondary text on navy. Must clear 4.5:1 on #1B2A41; measure, adjust lighter if not */
  --rule-on-navy:   rgba(240,237,230,0.25);

  /* ---- Hero type ---- */

  --w-light:        300;       /* hero headline only. Deviation from the brand doc's Regular/SemiBold, recorded there under "Open decisions" */
  --hero-size:      clamp(2.5rem, 6vw, 5rem);   /* was 7vw/5.5rem; at 1185px the full stop of "installed." broke to its own line */
  --h2-size:        clamp(1.6rem, 3vw, 2.4rem);
}

/* ---- Self-hosted Archivo. No font CDN: every external request on a page
        collecting health-adjacent enquiries has to be explained in the
        privacy policy. ---- */

/* One variable file, latin subset, 36KB, covering the whole weight range.
   Deviates from the brand doc's "static weights, not the variable font" and
   is better here: Google serves Archivo as variable only, so two statics would
   need generating by hand, and one request beats two. Self-hosted, so the
   no-font-CDN rule still holds. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Base ---- */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--w-regular);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  color: var(--heading);
  font-weight: var(--w-semibold);
  text-wrap: balance;
  line-height: 1.2;
}

/* ---- Links.
        Navy against body copy is 1.02:1. They are luminance twins, so a
        navy link is not distinguishable from body text by colour at all.
        The underline is the ONLY thing carrying the affordance.
        WCAG 1.4.1. This is not a style choice a later redesign may drop. ---- */

a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--navy);                    /* hue never shifts */
  text-decoration-thickness: 2px;        /* the underline does the work */
}

a:visited {
  color: var(--ink-2);                   /* 2.14:1 against navy, a perceptible step */
}

:focus-visible {
  outline: 2px solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
}

/* ---- Buttons ---- */

.btn {
  background: var(--navy);
  color: var(--white);                   /* 14.44:1 */
  text-decoration: none;
  font-weight: var(--w-semibold);
}

.btn:hover {
  background: var(--navy-lift);          /* 9.99:1 with white. Preserved, not crushed */
  color: var(--white);
}

/* ---- Time-critical ---- */

.urgent {
  color: var(--urgent);                  /* 6.79:1 on white, 5.80:1 on panel */
}

/* ---- Non-text ---- */

hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);     /* 3:1 non-text threshold */
}

/* ---- The legal entity string. Never an image, never the light grey. ---- */

.legal-entity {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}