/* ESUK Rail — Webfonts
 * --------------------------------------------------------------------------
 * House type system from the ESUK Brand & Design Standard:
 *   --sans      Helvetica Neue → Arimo (metric-compatible web fallback)
 *   --tactical  Chakra Petch (uppercase tactical labels, rule-box headings)
 *   --mono      IBM Plex Mono (data, references, eyebrows, code)
 *
 * Helvetica Neue is a licensed system face; Arimo is its metric-compatible
 * Google Fonts stand-in so web layouts reflow identically. Chakra Petch and
 * IBM Plex Mono load directly from Google Fonts.
 * -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ESUK Rail — Color tokens
 * Built from the real ESUK logo: navy wordmark with a blue-gradient lightning
 * bolt (deep navy → bright conductor blue). A calm, technical, MONOCHROMATIC
 * blue identity — engineering-grade, not startup-bright. No orange.
 * The signature device is the BOLT GRADIENT, not a contrasting hue.
 * -------------------------------------------------------------------------- */

:root {
  /* --- Core brand ------------------------------------------------------- */
  --esuk-ink:        #03162E; /* deepest navy — code surfaces, max contrast */
  --esuk-navy:       #042243; /* PRIMARY brand — mastheads, panels, footer */
  --esuk-steel:      #103A66; /* secondary structural blue */
  --esuk-conductor:  #1E6FB8; /* interactive blue — links, primary actions */
  --esuk-sky:        #5C8FC4; /* muted captions / supporting text */
  --esuk-mist:       #B9CCE2; /* light blue — on-dark labels, dark borders */
  --esuk-wash:       #E4ECF5; /* hairline rules & dividers on light */
  --esuk-paper:      #F5F8FC; /* page background */
  --esuk-white:      #FFFFFF;

  /* --- The bolt — the brand's signature gradient (sampled from the logo) - */
  --esuk-bolt-deep:  #083663; /* bolt tip — deep navy-blue */
  --esuk-bolt:       #1866A2; /* bolt body — bright conductor blue (ACCENT) */
  --esuk-bolt-bright:#2E8AD1; /* highlight / hover lift */
  --esuk-bolt-tint:  #DCEAF7; /* faint blue wash for fills */
  --gradient-bolt:   linear-gradient(168deg, #2E8AD1 0%, #1866A2 42%, #083663 100%); /* @kind color */

  /* --- Extended blue ramp ----------------------------------------------- */
  --esuk-navy-700:   #0A2F58;
  --esuk-steel-600:  #18548C;
  --esuk-conductor-400: #4E92D1;
  --esuk-sky-200:    #92B3D6;

  /* --- Signalling statuses (rail semantics; not brand accents) ---------- */
  --signal-ok:    #0D6B3F; /* compliant / pass — clear */
  --signal-warn:  #B5740C; /* caution / review — amber */
  --signal-fault: #C0341D; /* fault / fail — danger red */
  --signal-info:  #1E6FB8; /* informational — conductor */

  /* ===== Semantic aliases =============================================== */
  --surface-page:    var(--esuk-paper);
  --surface-card:    var(--esuk-white);
  --surface-sunken:  var(--esuk-paper);
  --surface-raised:  var(--esuk-white);
  --surface-inverse: var(--esuk-navy);
  --surface-code:    var(--esuk-ink);
  --surface-accent:  var(--esuk-bolt);

  --text-heading:    var(--esuk-navy);
  --text-body:       var(--esuk-navy);
  --text-secondary:  var(--esuk-steel);
  --text-muted:      var(--esuk-sky);
  --text-faint:      var(--esuk-sky-200);
  --text-on-dark:        var(--esuk-white);
  --text-on-dark-muted:  var(--esuk-mist);
  --text-accent:     var(--esuk-bolt);
  --text-link:       var(--esuk-conductor);

  --border-subtle:  var(--esuk-wash);
  --border-default: var(--esuk-mist);
  --border-strong:  var(--esuk-sky-200);
  --border-inverse: rgba(185, 204, 226, 0.20);
  --border-accent:  var(--esuk-bolt);

  --accent:        var(--esuk-bolt);
  --accent-strong: var(--esuk-bolt-deep);
  --focus-ring:    var(--esuk-conductor);
}

/* ESUK Rail — Typography tokens
 * Sans (Helvetica Neue / Arimo) for headings + body. Tactical (Chakra Petch)
 * for uppercase labels, chips and rule-box headings. Mono (IBM Plex Mono) for
 * data, references, eyebrows and code.
 * -------------------------------------------------------------------------- */

:root {
  /* --- Families ---------------------------------------------------------- */
  --font-sans:     'Helvetica Neue', Helvetica, 'Arimo', Arial, sans-serif;
  --font-tactical: 'Chakra Petch', 'Helvetica Neue', 'Arimo', sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Weights ----------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* --- Type scale (1.25 major-third, 16px base) -------------------------- */
  --text-xs:   0.75rem;  /* 12px — captions, table meta, eyebrow */
  --text-sm:   0.875rem; /* 14px — fine print, labels */
  --text-base: 1rem;     /* 16px — body */
  --text-md:   1.125rem; /* 18px — lead body */
  --text-lg:   1.375rem; /* 22px — small / tactical headings */
  --text-xl:   1.75rem;  /* 28px — H3 */
  --text-2xl:  2.25rem;  /* 36px — H2 */
  --text-3xl:  2.9375rem;/* 47px — H1 */
  --text-4xl:  3.75rem;  /* 60px — display / hero */

  /* --- Line heights ------------------------------------------------------ */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.55;
  --leading-relaxed:1.65;

  /* --- Letter spacing ---------------------------------------------------- */
  --tracking-display:-0.025em; /* tight Helvetica display headings */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-tactical:0.14em;  /* Chakra Petch uppercase labels */
  --tracking-eyebrow: 0.32em;  /* mono eyebrow / overline */
  --tracking-caps:    0.06em;  /* small uppercase rule-box headings */

  /* ===== Semantic roles ================================================== */
  --font-display:  var(--font-sans);   /* headings are bold Helvetica */
  --font-heading:  var(--font-sans);
  --font-body:     var(--font-sans);
  --font-ui:       var(--font-sans);
  --font-label:    var(--font-tactical);
  --font-data:     var(--font-mono);
}

/* ESUK Rail — Spacing, radii, layout tokens
 * 4px base grid. Tight, document-like rhythm. The brand radius is 3px — small,
 * tactical, engineering-grade. Nothing bubbly.
 * -------------------------------------------------------------------------- */

:root {
  /* --- Spacing scale (4px base) ------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem; /* 4 */
  --space-2:  0.5rem;  /* 8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  3rem;    /* 48 */
  --space-8:  4rem;    /* 64 — section padding ~62px */
  --space-9:  6rem;    /* 96 */
  --space-10: 8rem;    /* 128 */

  /* --- Radii (brand base = 3px) ------------------------------------------ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   3px;  /* --r — the brand default */
  --radius-lg:   6px;
  --radius-xl:   10px;
  --radius-pill: 999px;

  /* --- Border widths ----------------------------------------------------- */
  --border-hairline: 1px;
  --border-rule:     2px;
  --border-accent-w: 5px;  /* orange rule-box / bar-strip edge */
  --strip-h:         6px;  /* spark bar-strip on cards */
  --cut-size:        56px; /* corner-cut device */

  /* --- Layout ------------------------------------------------------------ */
  --container-sm:  720px;
  --container-md:  960px;
  --container-lg:  1040px; /* the standard's .wrap max-width */
  --container-xl:  1320px;
  --gutter:        clamp(1rem, 4vw, 2.5rem); /* @kind spacing */
}

/* ESUK Rail — Effects: shadows, focus, motion, signature devices
 * Tactical and flat. Shadows are sparse and cool. The brand's signature is
 * geometry, not elevation: the skewed "bolt slash", the corner-cut, and the
 * blue bolt bar-strip.
 * -------------------------------------------------------------------------- */

:root {
  /* --- Elevation (low, cool, used sparingly) ----------------------------- */
  --shadow-xs: 0 1px 1px rgba(4, 34, 67, 0.05);
  --shadow-sm: 0 1px 2px rgba(4, 34, 67, 0.08), 0 1px 1px rgba(4, 34, 67, 0.04);
  --shadow-md: 0 2px 6px rgba(4, 34, 67, 0.10), 0 1px 2px rgba(4, 34, 67, 0.06);
  --shadow-lg: 0 10px 28px rgba(4, 34, 67, 0.12), 0 3px 8px rgba(4, 34, 67, 0.07);
  --shadow-xl: 0 20px 50px rgba(3, 22, 46, 0.20), 0 6px 16px rgba(4, 34, 67, 0.10);
  --shadow-inset: inset 0 1px 2px rgba(4, 34, 67, 0.10);

  /* --- Focus (bolt ring) ------------------------------------------------ */
  --ring-width: 3px;
  --ring-color: rgba(30, 111, 184, 0.50);
  --ring: 0 0 0 var(--ring-width) var(--ring-color);

  /* --- Motion (calm, brisk, no bounce) ----------------------------------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);         /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */

  /* --- Devices ----------------------------------------------------------- */
  --rule-color: var(--esuk-wash);
  --spark-skew: -18deg; /* @kind other */

  /* Inverse navy panel gradient (subtle, for mastheads/feature panels) */
  --gradient-navy: linear-gradient(155deg, var(--esuk-navy) 0%, var(--esuk-ink) 100%);
}

/* ESUK Rail — base element styling & signature brand utilities.
 * Lightweight resets + defaults so raw HTML inherits the house voice, plus the
 * brand's signature devices: eyebrow, bolt-slash, corner-cut, bar-strip,
 * rule-box and tactical labels.
 * -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp { font-family: var(--font-data); font-size: 0.9em; }

hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--rule-color);
  margin: var(--space-6) 0;
}

::selection { background: var(--esuk-bolt); color: var(--esuk-white); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-md); }

/* --- Eyebrow / overline — mono, tracked-out, with a bolt tick ---------- */
.esuk-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.esuk-eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* --- Section number (mono, bolt) --------------------------------------- */
.esuk-snum {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}

/* --- Tactical label (Chakra Petch uppercase) ---------------------------- */
.esuk-tactical {
  font-family: var(--font-tactical);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tactical);
}

/* --- Bolt slash — the signature masthead device ------------------------ */
/* Apply to a position:relative; overflow:hidden container. */
.esuk-spark-slash {
  position: relative;
  overflow: hidden;
}
.esuk-spark-slash::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -6%;
  width: 46%;
  height: 200%;
  background: var(--gradient-bolt);
  transform: skewX(var(--spark-skew));
  opacity: 0.92;
  pointer-events: none;
}

/* --- Corner-cut device (bolt triangle, bottom-right) ------------------ */
.esuk-corner-cut { position: relative; }
.esuk-corner-cut::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  border-style: solid;
  border-width: 0 0 var(--cut-size) var(--cut-size);
  border-color: transparent transparent var(--esuk-bolt) transparent;
  pointer-events: none;
}

/* --- Bar-strip — bolt top edge on a card ------------------------------ */
.esuk-bar-strip { border-top: var(--strip-h) solid var(--esuk-bolt); }

/* --- Rule-box — navy panel with bolt left bar -------------------------- */
.esuk-rule-box {
  position: relative;
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.esuk-rule-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: var(--border-accent-w);
  height: 100%;
  background: var(--esuk-bolt);
}

/* --- Inverse navy surface ----------------------------------------------- */
.esuk-panel-dark {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}