/* Ventos tokens: dark navy page in the Ventos brand colours, oversized display type.
   Vocabulary register (copy token):
     approved: flatus, gas events, gut, pattern, atlas, reading, signal, diary
     banned:   slang of any kind; "medical grade", "clinical accuracy", "detects",
               "diagnoses", "treats", "revolutionary", "seamless", "cutting-edge"; em dashes. */
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/spacegrotesk.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* Ventos Extended Master Color Swatch 2026. Use these through the roles below. */
  --heritage-1: #A7C6ED;          /* lightest heritage blue */
  --heritage-2: #418FDE;
  --heritage-3: #1961AE;
  --heritage-4: #10069F;
  --heritage-5: #001A72;
  --heritage-6: #13294B;          /* darkest heritage blue */
  --soft-beige: #F2ECE4;
  --soft-stone: #F8F5F0;
  --mineral-border: #E1DCD4;
  --warm-taupe: #C6AD89;
  --mist-blue: #A3B3BA;
  --slate-blue: #5F7489;
  --deep-navy: #2A304F;
  --charcoal: #282A2E;

  /* Roles. Contrast (WCAG 2.x) worked out on 6 October 2026:
     text on --bg 13.4:1, on --surface 13.9:1; muted 6.7:1 and 7.0:1;
     links 8.3:1 and 8.6:1; warm 6.7:1 and 7.0:1; button text 8.6:1.
     --accent-strong is 4.3:1 on --bg and 4.5:1 on --surface: large text
     (24px, or 19px bold) and graphics only, never body copy.
     --slate-blue is 3.0:1 on --bg: borders and decoration only. */
  --bg: var(--heritage-6);
  --bg-glass: rgba(19, 41, 75, 0.88);
  --surface: var(--heritage-5);
  --border: rgba(167, 198, 237, 0.16);
  --border-strong: var(--mist-blue);      /* form fields: 7.0:1 on --surface */
  --text: var(--soft-stone);
  --text-muted: var(--mist-blue);
  --text-dim: var(--mist-blue);
  --accent: var(--heritage-1);             /* links, small accent text */
  --accent-strong: var(--heritage-2);      /* big figures, glow */
  --accent-ink: var(--heritage-5);         /* text on --accent */
  --accent-hover: var(--soft-stone);       /* button hover; --accent-ink on it is 13.9:1 */
  --accent-soft: rgba(65, 143, 222, 0.18);
  --warm: var(--warm-taupe);               /* used sparingly: the eyebrow, errors, focus ring */
  --focus: var(--warm-taupe);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --display: clamp(2.75rem, 1.2rem + 6.4vw, 6.5rem);
  --h1: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  --h2: clamp(1.9rem, 1.3rem + 2.2vw, 3.25rem);
  --h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --body: 1.0625rem;
  --caption: 0.875rem;
  --lh-body: 1.6;
  --lh-heading: 1.02;
  --measure: 62ch;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
  --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-40: 160px;
  --section: var(--s-24);
  --gutter: var(--s-4);
  --container: 1280px;

  --radius: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 260ms;
  --glow: 0 0 48px rgba(65, 143, 222, 0.35), 0 0 120px rgba(65, 143, 222, 0.16);
}
@media (min-width: 768px) { :root { --section: var(--s-32); --gutter: var(--s-8); } }
@media (min-width: 1280px) { :root { --section: var(--s-40); } }