/* ba-tokens.css — Becoming Alpha shared design tokens (web marketing previews)
   Authority: Home Operating Logic + HIW Operating Spine (approved 2026-07-18)
   + Website Design Rules / graphic-type-contract.md
   Load this stylesheet FIRST on every built preview page.
   Do not redefine --ba-font-* or --fs-* / --ls-* in page CSS. */

:root {
  /* ——— Color (shared) ——— */
  --ba-cloud: #F7F8FC;
  --ba-white: var(--pearl-panel);
  --ba-fog: var(--pearl-line);
  --ba-fog-soft: var(--pearl-alt);
  --ba-obsidian: var(--pearl-ink);
  --ba-deep-space: var(--pearl-ink);
  --ba-indigo-slate: var(--pearl-ink);
  --ba-muted: var(--pearl-muted);
  --ba-faint: var(--pearl-muted);
  --ba-violet: var(--pearl-accent);
  --ba-royal: var(--pearl-accent);
  --ba-peri: var(--pearl-art);
  --ba-wash: var(--pearl-soft);
  --ba-lavender-soft: var(--ba-wash); /* alias — Next & Related Block 1 wash */
  --ba-ok: #1C7A54;
  --ba-testnet: var(--pearl-accent);
  --ba-pending: var(--pearl-muted);
  --ba-counsel: #C0263E;
  --ba-radius: 7px;
  --ba-radius-plate: 18px;

  /* ——— Font stacks (ONE site-wide contract — no Roboto / Helvetica) ——— */
  --ba-font-display: var(--pearl-font-display);
  --ba-font-body: var(--pearl-font-body);
  --ba-font-mono: var(--pearl-font-mono);

  /* ——— H1 tiers (intentional page character) — fluid via clamp; desktop max unchanged ——— */
  --fs-h1-sm: clamp(30px, 5vw, 52px);   /* Home / Solutions marketing heroes */
  --fs-h1-md: clamp(31px, 5.2vw, 56px);   /* Default product / Resources / most Trust */
  --fs-h1-lg: clamp(32px, 5.4vw, 58px);   /* Long-form essay / select Trust */
  --fs-h1-xl: clamp(33px, 5.6vw, 62px);   /* Platform deep heroes (Launch OS class) */
  --fs-h1-xxl: clamp(34px, 6.2vw, 74px);  /* How It Works only */

  /* Aliases used by homepage and remounted pages */
  --fs-display: var(--fs-h1-sm);
  --fs-h1: var(--fs-h1-md);

  /* ——— Shared type scale ——— */
  --fs-h2: clamp(24px, 3.4vw, 38px);
  --fs-h2-lg: clamp(26px, 4vw, 46px);
  --fs-lede: 20px;
  --fs-body-sm: 16px;
  --fs-body: 16.5px;
  --fs-body-lg: 18px;
  --fs-essay: 17.5px;
  --fs-kicker: 12px;
  --fs-mono-sm: 10.5px;
  --fs-mono-lg: 12.5px;
  --fs-cta: 16px;
  --fs-footer: 13.5px;
  --fs-compliance: 12px;

  /* ——— Tracking ——— */
  --ls-display: -0.01em;
  --ls-kicker: 0.2em;

  /* ——— Line heights ——— */
  --lh-display: 1.08;
  --lh-h2: 1.2;
  --lh-lede: 1.55;
  --lh-body: 1.6;
  --lh-essay: 1.78;
  --lh-diagram-support: 1.4;

  /* ——— Diagram / in-graphic type (Home + Operating Spine authority) ——— */
  --fs-diagram-lead: 16px;       /* In-graphic quote / lead lines */
  --fs-diagram-heading: 15px;    /* Primary in-graphic headings (Poppins 600) */
  --fs-diagram-title: 15px;      /* Alias — plate / expanded panel titles */
  --fs-diagram-subhead: 12px;    /* Sub-headings e.g. Founders & community (Poppins 600) */
  --fs-diagram-support: 12px;    /* Supporting copy (Lato) */
  --fs-diagram-label: 12px;      /* Dense cell / node labels when not fluid */
  --fs-diagram-meta: 11px;       /* Mono legend heads (Fact), secondary captions */
  --fs-diagram-mono-plate: 12px; /* Plate title mono (OPERATING LOGIC) */
  --fs-diagram-mono-sub: 11.5px; /* Plate subtitle mono */
  --fs-diagram-mono-hint: 10px;  /* Hints / legend / thread meta */
  --fs-diagram-mono-num: 9px;    /* Step numbers / badge micro */
  --fs-diagram-micro: 9.5px;     /* Tiny tags only (BUILT, Part 01) */
  --fs-diagram-figure: clamp(24px, 3vw, 32px);     /* Large numerals (stat tiles) */
  --fs-diagram-label-min: 8.5px; /* Fluid dense-row floor */
  --fs-diagram-label-max: 10.5px;/* Fluid dense-row ceiling (7-across) */
  --ls-diagram: 0.16em;          /* Mono labels in diagrams */
  --diagram-pad: 16px;           /* Minimum text-to-border clearance */
  --diagram-ink: var(--ba-obsidian);   /* Heading / label color */
  --diagram-muted: var(--ba-muted);    /* Supporting copy color */
  --diagram-signal: var(--ba-violet);

  /* ——— Uniform Card Rule (structure tokens) ——— */
  --card-head-h: 42px;           /* Compact cards (four-parts) */
  --card-head-h-lg: 52px;        /* Route / continue cards */
  --card-kicker-h: 18px;         /* Fixed kicker line so heads share a baseline */
  --card-rule-gap: 12px 0 14px;  /* Space above/below hairline divider */
  --card-pad: 18px 16px 16px;    /* Compact card padding */
  --card-pad-lg: 24px 22px 20px; /* Route card padding */
  --fs-card-title: 15px;         /* Two-word / two-line compact card heads */
  --fs-card-title-lg: 18px;      /* Two-word / two-line route card heads */
  --fs-card-body: 12px;          /* Compact card / legend supporting copy */
  --fs-card-body-lg: 12px;       /* Route card body (same support role) */

  /* ——— Layout gutters (section horizontal padding) ——— */
  --ba-gutter: 64px;
}

/* Site-wide media guard (all breakpoints) */
img,
svg:not(.ba-social svg):not(.ba-nav-mobile-toggle__bars svg) {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1199px) {
  :root {
    --card-head-h: 38px;
    --card-head-h-lg: 46px;
    --fs-card-title: 14px;
    --fs-card-title-lg: 16px;
  }
}

@media (max-width: 1023px) {
  :root {
    --ba-gutter: clamp(20px, 4vw, 28px);
  }
}

@media (max-width: 640px) {
  :root {
    --card-head-h: 36px;
    --card-head-h-lg: 42px;
    --fs-card-title: 13px;
    --fs-card-title-lg: 15px;
    --ba-gutter: 20px;
  }
}

/* Shared diagram text helpers (safe on HTML and inline SVG <text>) */
.ba-diagram-lead {
  font-family: var(--ba-font-body);
  font-size: var(--fs-diagram-lead);
  color: var(--diagram-muted);
}
.ba-diagram-heading,
.ba-diagram-title {
  font-family: var(--ba-font-display);
  font-weight: 600;
  font-size: var(--fs-diagram-heading);
  color: var(--diagram-ink);
  letter-spacing: -0.005em;
}
.ba-diagram-subhead {
  font-family: var(--ba-font-display);
  font-weight: 600;
  font-size: var(--fs-diagram-subhead);
  color: var(--diagram-ink);
  letter-spacing: -0.005em;
}
.ba-diagram-support {
  font-family: var(--ba-font-body);
  font-size: var(--fs-diagram-support);
  line-height: var(--lh-diagram-support);
  color: var(--diagram-muted);
}
.ba-diagram-label {
  font-family: var(--ba-font-display);
  font-weight: 600;
  font-size: var(--fs-diagram-label);
  color: var(--diagram-ink);
}
.ba-diagram-meta {
  font-family: var(--ba-font-mono);
  font-size: var(--fs-diagram-meta);
  letter-spacing: var(--ls-diagram);
  color: var(--diagram-muted);
}
.ba-diagram-micro {
  font-family: var(--ba-font-mono);
  font-size: var(--fs-diagram-micro);
  letter-spacing: var(--ls-diagram);
}

/* Google Fonts contract (load once in HTML — do not @import in page CSS):
   family=Poppins:wght@600;700
   &family=Lato:wght@400;600;700
   &family=JetBrains+Mono:wght@400;500;600;700
*/