/* TechSussd design tokens and the accessibility floor.
   Direction: Label (V-08, docs/design/CHOICE.md). Light and dark.
   Hand-written in the token shape the contrast check reads: primitives and
   semantic names in the root block, the dark theme in the media query and
   again under data-theme. Change a token here, never a component.
   No closing braces inside comments in the token blocks: the reader stops at the first one. */

@font-face {
  font-family: "Archivo Narrow";
  src: url("/fonts/archivo-narrow-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Neutrals: a cool paper white and a green-black. Not warm, not bone. */
  --colour-neutral-0: #ffffff;
  --colour-neutral-50: #f1f3f2;
  --colour-neutral-100: #e6e9e7;
  --colour-neutral-200: #d3d8d5;
  --colour-neutral-400: #6b7570;
  --colour-neutral-600: #4b524f;
  --colour-neutral-900: #0b0d0c;

  /* Accent ramp, steps 50 to 900: signal green. 500 is the light action. */
  --colour-accent-50: #e3f6d0;
  --colour-accent-100: #c8edb0;
  --colour-accent-300: #6fdc98;
  --colour-accent-500: #0b6e3a;
  --colour-accent-600: #08572d;
  --colour-accent-700: #064424;
  --colour-accent-900: #123522;

  --colour-positive-100: #e3f5ec;
  --colour-positive-500: #0f7b52;
  --colour-caution-100: #fdf2dd;
  --colour-caution-500: #9a6207;
  --colour-critical-100: #fde8e6;
  --colour-critical-500: #b42318;

  --font-family-display: "Archivo Narrow", system-ui, sans-serif;
  --font-family-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, Consolas, monospace;

  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1.0625rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 1.875rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* The spacing scale, in the shape the interface-spacing check asks for, under
     a product name: the platform name cannot appear on a public file (B-8). */
  --spacing-scale: pair 0.25rem, between 1rem, submit 2rem;

  --rule-heavy: 3px;
  --rule-light: 1px;
  --radius: 2px;
  --touch: 44px;
  --measure: 64ch;

  /* Motion: one curve, three durations (motion protocol). */
  --curve: cubic-bezier(0.2, 0, 0, 1);
  --tap: 90ms;
  --ease-t: 200ms;
  --enter: 320ms;

  --surface: var(--colour-neutral-0);
  --surface-sunken: var(--colour-neutral-50);
  --surface-raised: var(--colour-neutral-0);
  --border: var(--colour-neutral-200);
  --border-strong: var(--colour-neutral-400);
  --text: var(--colour-neutral-900);
  --text-muted: var(--colour-neutral-600);
  --text-inverse: var(--colour-neutral-0);
  --action: var(--colour-accent-500);
  --action-hover: var(--colour-accent-600);
  --action-quiet: var(--colour-accent-50);
  --focus-ring: var(--colour-accent-500);
  --marker: var(--colour-accent-50);
  --plain: var(--surface-raised);
  --plain-hover: var(--colour-neutral-100);

  /* The label band: black in both themes, the one constant on the page. */
  --masthead: #0b0d0c;
  --masthead-ink: #ffffff;
  --masthead-quiet: #c9d1cc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --colour-neutral-0: #0e1110;
  --colour-neutral-50: #151a18;
  --colour-neutral-100: #1a201d;
  --colour-neutral-200: #2a322e;
  --colour-neutral-400: #7d8a84;
  --colour-neutral-600: #a9b3ae;
  --colour-neutral-900: #f2f5f3;
  --colour-positive-100: #0a2e21;
  --colour-positive-500: #5fd39b;
  --colour-caution-100: #33240a;
  --colour-caution-500: #f0c05a;
  --colour-critical-100: #3d120e;
  --colour-critical-500: #f8908a;
  --surface-raised: var(--colour-neutral-100);
  --action: var(--colour-accent-300);
  --action-hover: #4fc47e;
  --action-quiet: var(--colour-accent-900);
  --focus-ring: var(--colour-accent-300);
  --marker: var(--colour-accent-900);
  --plain-hover: var(--colour-neutral-0);
  }
}
:root[data-theme="dark"] {
  --colour-neutral-0: #0e1110;
  --colour-neutral-50: #151a18;
  --colour-neutral-100: #1a201d;
  --colour-neutral-200: #2a322e;
  --colour-neutral-400: #7d8a84;
  --colour-neutral-600: #a9b3ae;
  --colour-neutral-900: #f2f5f3;
  --colour-positive-100: #0a2e21;
  --colour-positive-500: #5fd39b;
  --colour-caution-100: #33240a;
  --colour-caution-500: #f0c05a;
  --colour-critical-100: #3d120e;
  --colour-critical-500: #f8908a;
  --surface-raised: var(--colour-neutral-100);
  --action: var(--colour-accent-300);
  --action-hover: #4fc47e;
  --action-quiet: var(--colour-accent-900);
  --focus-ring: var(--colour-accent-300);
  --marker: var(--colour-accent-900);
  --plain-hover: var(--colour-neutral-0);
}

/* ---- The floor: applied once, so no screen has to remember it ---- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; animation-delay: 0s !important; transition-delay: 0s !important; animation-timeline: auto !important; animation-range: normal !important; }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

h1, h2, h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
p, li { text-wrap: pretty; }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a { color: var(--action); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
@media (hover: hover) {
  a:hover { color: var(--text); }
}
time, [data-figure] { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Buttons: state the colour with the background, lift and deepen on hover,
   press on click. Every variant restates all three. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch); min-width: var(--touch);
  padding: var(--space-2) var(--space-4);
  font: inherit; font-weight: 700;
  color: var(--text-inverse); background: var(--action);
  border: var(--rule-light) solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background var(--ease-t) var(--curve), color var(--ease-t) var(--curve), transform var(--tap) var(--curve);
}
@media (hover: hover) {
  .button:hover { color: var(--text-inverse); background: var(--action-hover); transform: translateY(-1px); }
  .button--plain:hover { color: var(--text); background: var(--plain-hover); transform: translateY(-1px); }
}
.button:active { transform: translateY(1px); }
.button--plain { color: var(--text); background: var(--plain); border-color: var(--text); }
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .button:hover { transform: none; }
  .button--plain:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}

label { display: block; margin-bottom: var(--space-1); font-weight: 700; font-size: var(--font-size-sm); }
input, select, textarea {
  width: 100%; min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--text); background: var(--surface);
  border: 2px solid var(--border-strong); border-radius: var(--radius);
}

/* The disclosure label. Black on white or white on black, never the accent,
   so it reads as a label and not as a button. */
.ad-label {
  display: inline-block;
  padding: 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--surface);
  background: var(--text);
  border-radius: var(--radius);
}