/* ==========================================================================
   Design tokens — extracted from "Third Bay Homepage.dc.html"
   Every literal value in the source design maps to one of these.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --c-ink: #0c1a2b; /* deepest navy: footer, trust bar, portal chrome, body text */
  --c-navy: #132f4c; /* primary surface: header, hero, service cards, CTA */
  --c-steel: #2c5a82; /* borders on dark, chart bars */
  --c-amber: #f0a202; /* accent + every CTA */
  --c-amber-hover: #ffb524;
  --c-bone: #f4f2ed; /* page background */
  --c-white: #ffffff;
  --c-slate: #8b939c; /* muted text on dark */
  --c-rule: #d9d5cc; /* hairline on light */
  --c-rule-soft: #e3dfd6; /* hairline inside light metric grids */
  --c-placeholder: #e7e3da; /* media placeholder fill */
  --c-navy-tint: #1a3a5c; /* placeholder fill on dark */

  /* Opacity ramps used for body copy over solid surfaces */
  --o-body-dark: 0.82; /* white text on navy */
  --o-lede-dark: 0.86;
  --o-body-light: 0.78; /* ink text on bone */
  --o-quote-light: 0.75;

  /* --- Type ------------------------------------------------------------- */
  --f-display: Archivo, Helvetica, Arial, sans-serif;
  --f-body: 'Public Sans', Helvetica, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-eyebrow: 13px;
  --fs-micro: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-body-lg: 17px;
  --fs-lede: 18px;

  /* Fluid heading scale */
  --fs-h1: clamp(40px, 5.6vw, 68px);
  --fs-h2: clamp(30px, 3.6vw, 42px);
  --fs-h2-dark: clamp(32px, 4.2vw, 52px); /* portal + final CTA run larger */
  --fs-h2-cta: clamp(32px, 4.4vw, 54px);
  --fs-kpi: clamp(26px, 3vw, 34px);

  --ls-tight: -0.03em; /* h1, display h2 */
  --ls-snug: -0.025em; /* section h2 */
  --ls-card: -0.02em; /* h3, wordmark */
  --ls-eyebrow: 0.14em;
  --ls-label: 0.1em;
  --ls-badge: 0.08em;
  --ls-mono: 0.06em;

  --lh-display: 1.03;
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --lh-lede: 1.65;

  /* --- Layout ------------------------------------------------------------ */
  --maxw: 1180px;
  --maxw-prose: 780px;
  --maxw-hero: 880px;
  --maxw-hero-text: 720px;
  --maxw-cta: 900px;
  --gutter: 24px;
  --section-y: 88px;
  --section-y-lg: 96px;
  --section-y-xl: 100px;
  --anchor-offset: 150px; /* clears the sticky header */
  --rule-thick: 6px; /* the amber divider bars */
  --callbar-h: 60px;

  /* --- Logo as a mask ------------------------------------------------------
     SVG/logo.svg itself, served by server.js, used only as mask-image so the
     color stays a token. One color by design: amber is reserved, so the
     background mark never carries the amber bay. */
  --mark-svg: url('/brand/logo.svg');
  --o-mark-corner: 0.06;

  /* The design has no rounded corners anywhere. Kept as a token so it
     stays a deliberate decision rather than an omission. */
  --radius: 0;

  --bp-narrow: 760px; /* matchMedia breakpoint from the source component */
}