/* Deploy copy of brand/borderstar/tokens.css — that file is the source of truth.
 * Regenerate with: cp brand/borderstar/tokens.css site/borderstar/tokens.css
 * (added 2026-09-14 by Herb Cloud so the static page deploys self-contained.) */

/* BorderStar — design tokens
 * Filed 2026-09-14 by Herb Cloud (@herb, AWS box) from Josh's brand sheet.
 * SOURCE values (the four colours) are exactly as printed on the sheet: brand-baseline.md §2.
 * Values marked DERIVED are this agent's engineering choices, free to change. The brand's are not.
 * Contrast notes are computed (WCAG 2.x), not estimated.
 */

:root {
  /* ---- Colour: SOURCE ---- */
  --bs-navy: #0E2F49;        /* Deep Navy     — wordmark "Border", icon strokes, body text */
  --bs-teal: #4EBD8F;        /* Signal Teal   — accent + wordmark "Star". 2.09:1 on Mist: accents only */
  --bs-slate: #5E7080;       /* Border Slate  — secondary text, dividers. 4.57:1 on Mist */
  --bs-mist: #EEF3F5;        /* Mist          — page background */

  /* ---- Colour: DERIVED ---- */
  --bs-navy-soft: #1B4463;   /* navy lifted for hover / secondary surfaces */
  --bs-teal-dark: #2F7D5C;   /* darkened teal that can carry small text on Mist */
  --bs-ink: var(--bs-navy);
  --bs-body: #24384A;        /* body copy, a touch lighter than headline navy */
  --bs-muted: var(--bs-slate);
  --bs-line: #D8E1E6;        /* hairlines on Mist */
  --bs-surface: #FFFFFF;
  --bs-wash: #F7FAFB;        /* section wash, a hair lighter than Mist */
  --bs-teal-soft: #DCF0E6;   /* teal at wash strength: step numbers, badges */
  --bs-bg: var(--bs-mist);

  /* ---- Type: face PENDING (brand-baseline.md §6); this stack is DERIVED, one line to replace ---- */
  --bs-font-sans: "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bs-w-regular: 400;
  --bs-w-medium: 500;
  --bs-w-semibold: 600;
  --bs-w-bold: 700;

  --bs-text-xs: 0.75rem;
  --bs-text-sm: 0.875rem;
  --bs-text-base: 1rem;
  --bs-text-lg: 1.125rem;
  --bs-text-xl: 1.375rem;
  --bs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --bs-h2: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
  --bs-h1: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem);

  --bs-leading-tight: 1.15;
  --bs-leading-body: 1.6;
  --bs-tracking-kicker: 0.14em;

  /* ---- Space / shape: DERIVED ---- */
  --bs-space-1: 0.25rem;
  --bs-space-2: 0.5rem;
  --bs-space-3: 0.75rem;
  --bs-space-4: 1rem;
  --bs-space-5: 1.25rem;
  --bs-space-6: 1.5rem;
  --bs-space-8: 2rem;
  --bs-space-12: 3rem;
  --bs-space-16: 4rem;

  --bs-radius-sm: 4px;
  --bs-radius: 10px;
  --bs-radius-lg: 16px;
  --bs-radius-pill: 999px;

  --bs-shadow-sm: 0 1px 2px rgba(14, 47, 73, 0.08);
  --bs-shadow: 0 8px 28px rgba(14, 47, 73, 0.10);

  --bs-maxw: 1120px;
}

/* ---- Element defaults so a page off these tokens looks like the sheet ---- */
.bs-kicker {
  color: var(--bs-teal-dark);
  font: var(--bs-w-bold) var(--bs-text-xs) / 1.2 var(--bs-font-sans);
  letter-spacing: var(--bs-tracking-kicker);
  text-transform: uppercase;
}

.bs-wordmark { font: var(--bs-w-bold) 1.5rem/1 var(--bs-font-sans); letter-spacing: -0.01em; }
.bs-wordmark .border { color: var(--bs-navy); }
.bs-wordmark .star   { color: var(--bs-teal); }

.bs-btn-primary {
  background: var(--bs-navy);
  color: var(--bs-mist);
  font: var(--bs-w-bold) var(--bs-text-base) / 1 var(--bs-font-sans);
  padding: var(--bs-space-3) var(--bs-space-6);
  border-radius: var(--bs-radius-pill);
  border: 0;
}

.bs-btn-secondary {
  background: transparent;
  color: var(--bs-navy);
  border: 2px solid var(--bs-navy);
  font: var(--bs-w-semibold) var(--bs-text-base) / 1 var(--bs-font-sans);
  padding: var(--bs-space-3) var(--bs-space-6);
  border-radius: var(--bs-radius-pill);
}

/* Accessibility: --bs-teal on --bs-mist is 2.09:1 and --bs-slate on --bs-mist is 4.57:1.
 * Use --bs-teal for accents, graphics and large type only; --bs-teal-dark for small teal text. */