/* Design tokens — single source of truth for spacing, type, colour, layout.

   Palette structure ("The Honest Ledger" — see
   docs/reports/design/FULL_RESET_REPORT_2026-09-13.md "New design
   thesis") was made fresh for the 2026-09-13 full public-site reset.
   Every colour below is contrast-checked by direct WCAG relative-
   luminance computation, not eyeballed.

   2026-09-17 (Homepage V2, docs/reports/2026-09-17/…homepage-v2.md):
   the brand accent evolved from the original warm copper
   (--color-primary: #A8431E) to an electric blue — an explicit,
   owner-approved visual-direction change ("technology / trust /
   infrastructure" per the brief), applied sitewide via this one token
   rather than repainting every page's markup, plus a new navy/blue
   set of tokens for the homepage's dark hero/CTA/trust sections. The
   warm off-white base (--color-bg/--color-surface/--color-border) and
   ink focus ring are UNCHANGED — this is an accent-colour evolution,
   not a second full reset (docs/DECISIONS.md, "no third reset").
   Every new/changed value re-verified by the same relative-luminance
   method as the original palette — see that report's "Accessibility"
   section for the exact ratios.

   One committed light theme, no prefers-color-scheme toggle: a
   deliberate choice (CLAUDE.md section 7 explicitly allows this), not
   an oversight — a single well-tested palette is safer than a parallel
   dark variant that could drift out of contrast-compliance unnoticed. */
:root {
  --color-bg: #FAF8F4;
  --color-surface: #F1ECE3;
  --color-surface-raised: #FFFFFF;
  --color-border: #E4DFD5;
  --color-border-strong: #8A8272; /* >=3:1 on --color-bg — WCAG 1.4.11 non-text contrast */
  --color-text: #181614;
  --color-text-muted: #5B564F;
  --color-text-on-primary: #FFFFFF;
  /* Electric blue brand/CTA colour (2026-09-17) — 5.5:1 on white/
     --color-bg as a link/text colour, 5.5:1 for white text on it as a
     button fill (both directions checked; see report). */
  --color-primary: #2461D9;
  --color-primary-dark: #1A4BAA;
  --color-primary-surface: #E8F0FB;
  --color-success: #2F6B3A;
  --color-danger: #A3271E;
  /* Ink, unchanged since 2026-09-13: real headless-Chrome visual QA
     found a copper focus ring read as "on-brand but subtle" against
     copper buttons. Ink gives an unambiguous, high-contrast ring
     against every real background on the site (17-18:1 on paper/
     white/alt-surface, and against the new navy sections too — see
     below) regardless of what element it's drawn around or what the
     brand accent colour is — never tied to --color-primary. */
  --color-focus: #181614;
  --color-link: var(--color-primary);

  /* ---- Homepage V2 dark/navy section set (2026-09-17) ----
     Used only where a section is deliberately dark (hero, final CTA,
     trust strip) — never the page's default text/background pair.
     --color-on-navy: 16.5:1 on --color-navy. --color-on-navy-muted:
     9.4:1 on --color-navy (still comfortably >=4.5:1 for body text,
     not just large text). --color-cyan-accent is decorative only
     (icons, thin rules, small badges) — never relied on for text
     contrast. */
  --color-navy: #0B1F3A;
  --color-navy-soft: #12294A;
  --color-on-navy: #F4F7FB;
  --color-on-navy-muted: #B7C4D9;
  --color-cyan-accent: #22D3EE;
  --color-surface-blue: #EEF3FB;
  --color-border-cool: #DCE6F2;
  /* Muted body text on a solid --color-primary background (final CTA
     band) — 4.77:1, kept deliberately lighter than --color-on-navy-muted
     since it's checked against a lighter section colour. */
  --color-on-blue-muted: #E4EFFD;
  --radius-xl: 16px;

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid within sane bounds (clamp) — CLAUDE.md 2026-09-13 brief section
     68: headlines scale with viewport but never overrun a phone, body
     copy never shrinks to miniature on a 4K display. */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --text-3xl: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  --text-4xl: clamp(2.4rem, 1.8rem + 3vw, 3.4rem);
  --leading-tight: 1.15;
  --leading-normal: 1.55;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Sharper, smaller radii than a consumer-app look — a technical
     operator's tool, not a bubbly SaaS product (see design thesis). */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(24, 22, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 22, 20, 0.10);

  /* Reading-width content only (prose, FAQ answers) — see base.css .prose.
     Everything else is fluid; there is no single global content cap
     (CLAUDE.md 2026-09-13 brief section 9 — "100% of the screen"). */
  --measure: 66ch;
  /* Fluid gutter, tuned 2026-09-13 after real human visual QA found
     content sitting too close to the physical viewport edge. The `rem +
     vw` shape (not pure `vw`) is deliberate, not copied mechanically —
     web.dev/2026 responsive-spacing guidance: a pure vw value doesn't
     grow when a user zooms the page, a rem component does, so the
     gutter stays proportionally correct under 200% zoom too. Roughly a
     3% slope (within the "2-5% of viewport" range), a ~17-20px floor on
     a phone, capped at 120px so it never turns into a second, oversized
     "container" on a huge display. */
  --gutter: clamp(1rem, 0.5rem + 3vw, 7.5rem);
  /* Outer sanity cap so a data table's cells don't stretch to absurd
     widths past ~4K — not a "centred box," just a ceiling most screens
     never hit; ultrawide gains extra real columns instead (see the
     hosting/product-detail layout rules in components.css). */
  --frame-max: 2200px;

  --border-width: 1px;
  --duration-fast: 120ms;

  --bp-sm: 640px;   /* phone -> larger phone */
  --bp-md: 768px;   /* tablet portrait */
  --bp-lg: 1024px;  /* tablet landscape / small laptop */
  --bp-xl: 1440px;  /* laptop / small desktop — ultrawide content kicks in here */
  --bp-2xl: 1920px; /* desktop */
  --bp-3xl: 2560px; /* wide/ultrawide */
}

/* Self-hosted IBM Plex (SIL Open Font License 1.1), latin subset only —
   no third-party font request at runtime (CLAUDE.md sections 28, 51).
   IBM Plex Sans is served by its foundry as a genuine variable font (one
   file covers the whole weight range); IBM Plex Mono is not, so its two
   weights actually in use are two separate static files. Numbers
   (prices, specs, billing cycles) are set in the mono face deliberately
   — tabular figures so columns of real data actually line up; this is
   the one carried-forward idea from an earlier direction's "data
   language" accent, re-justified on its own merits here, independent of
   that direction's visual system. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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