/* =============================================================================
   CyberBackstop — base.css
   Design tokens, reset, typography, layout primitives, utilities.

   Load order:  base.css  →  components.css  →  hero.css
   Class prefix: cb-      No !important.     No inline styles.
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   Verbatim from BRIEF.md §2. Do not alter these values.
   ============================================================================= */

:root {
  /* base — night */
  --cb-night-950: #070A0F;
  --cb-night-900: #0B0F16;   /* page background */
  --cb-night-800: #121824;   /* raised surface */
  --cb-night-700: #1A2231;   /* card */
  --cb-night-600: #26313F;   /* hairline-adjacent */
  --cb-night-500: #38455A;

  /* chalk — the linework */
  --cb-chalk-50:  #FBFCFD;
  --cb-chalk-100: #F1F4F8;
  --cb-chalk-200: #E2E7EE;
  --cb-chalk-300: #C3CBD7;
  --cb-chalk-400: #99A4B5;
  --cb-chalk-500: #6F7C90;

  /* clay — the hot accent (infield dirt under lights) */
  --cb-clay-300: #FFB08A;
  --cb-clay-400: #FF8B57;
  --cb-clay-500: #F0673A;   /* primary accent */
  --cb-clay-600: #D24A20;
  --cb-clay-700: #A33716;

  /* stadium light — glow/bloom only, never body text */
  --cb-glow-warm: #FFD9A0;
  --cb-glow-cool: #BBD8FF;

  /* turf — sparing, used for "safe"/success states */
  --cb-turf-500: #3E9E6B;

  /* semantic */
  --cb-bg:        var(--cb-night-900);
  --cb-surface:   var(--cb-night-800);
  --cb-text:      var(--cb-chalk-100);
  --cb-text-muted:var(--cb-chalk-400);
  --cb-accent:    var(--cb-clay-500);
  --cb-line:      rgba(255,255,255,.08);
  --cb-line-strong: rgba(255,255,255,.16);

  --cb-danger:  #C8452F;
  --cb-warning: #C08A2A;
  --cb-info:    #3C79C4;
  --cb-success: var(--cb-turf-500);

  /* type */
  --cb-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --cb-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --cb-font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* layout */
  --cb-max: 1120px;
  --cb-gutter: 28px;
  --cb-radius: 4px;
}


/* =============================================================================
   2. DERIVED SCALE
   Sizing, spacing, timing and elevation only. No new colors are introduced —
   every color reference below resolves to a §1 token or a neutral alpha.

   CONTRAST POLICY (measured against the night grounds, WCAG 2.1 AA):
     text on ground        chalk-100 14.4–18.0:1   AAA   — default body
     muted text on ground  chalk-400  6.3– 7.9:1   AA/AAA — --cb-text-muted
     accent text on ground clay-500   5.1– 6.3:1   AA    — eyebrows, links
     chalk-500             3.8– 4.7:1  ✗ TEXT      — hairlines / decoration ONLY
     clay-600 / clay-700   ≤4.3:1      ✗ TEXT      — fills & borders ONLY
     --cb-danger  3.7–4.0:1 ✗ TEXT     — error borders/rails only; error COPY
                                          uses clay-300 (10.0–10.8:1)
     --cb-info    4.0–4.3:1 ✗ TEXT     — non-text accents only
     --cb-warning 5.9–6.3:1 ✓          — usable as text
     --cb-success 5.3–5.8:1 ✓          — usable as text
   Text ON clay fills is always --cb-night-950 (6.3:1 on clay-500) — never chalk
   (chalk-100 on clay-500 is 2.8:1 and fails).
   ============================================================================= */

:root {
  /* fluid type scale — 320px → 1920px */
  --cb-fs-display: clamp(2.625rem, 1.35rem + 6.4vw, 6rem);
  --cb-fs-h2:      clamp(1.875rem, 1.30rem + 2.9vw, 3.375rem);
  --cb-fs-h3:      clamp(1.25rem, 1.09rem + 0.8vw, 1.75rem);
  --cb-fs-h4:      clamp(1.0625rem, 1.00rem + 0.32vw, 1.25rem);
  --cb-fs-lead:    clamp(1.0625rem, 0.97rem + 0.48vw, 1.3125rem);
  --cb-fs-body:    clamp(1rem, 0.975rem + 0.13vw, 1.0625rem);
  --cb-fs-sm:      0.9375rem;
  --cb-fs-xs:      0.8125rem;
  --cb-fs-eyebrow: clamp(0.6875rem, 0.655rem + 0.16vw, 0.8125rem);

  /* line heights */
  --cb-lh-display: 0.94;
  --cb-lh-head:    1.06;
  --cb-lh-body:    1.62;

  /* tracking */
  --cb-track-display: -0.015em;
  --cb-track-eyebrow: 0.16em;
  --cb-track-mono:    0.02em;

  /* spacing scale */
  --cb-space-1: 0.25rem;
  --cb-space-2: 0.5rem;
  --cb-space-3: 0.75rem;
  --cb-space-4: 1rem;
  --cb-space-5: 1.5rem;
  --cb-space-6: 2rem;
  --cb-space-7: 3rem;
  --cb-space-8: 4rem;
  --cb-space-9: 6rem;

  /* vertical rhythm for full-width bands */
  --cb-section-y:      clamp(3.5rem, 2.2rem + 5.6vw, 7rem);
  --cb-section-y-tight: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);

  /* chrome */
  --cb-header-h: 68px;
  --cb-radius-lg: 8px;
  --cb-radius-pill: 999px;

  /* motion */
  --cb-ease: cubic-bezier(.2, .7, .3, 1);
  --cb-dur-fast: 120ms;
  --cb-dur: 200ms;
  --cb-dur-slow: 380ms;

  /* elevation (neutral shadow, no new hue) */
  --cb-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --cb-shadow-2: 0 8px 24px -12px rgba(0,0,0,.7);
  --cb-shadow-3: 0 24px 60px -28px rgba(0,0,0,.85);

  /* focus ring — chalk-50 clears 3:1 against every ground AND against a
     clay-500 fill (3.05:1), so one ring color works everywhere. */
  --cb-focus-ring: var(--cb-chalk-50);
  --cb-focus-halo: var(--cb-night-950);
}


/* =============================================================================
   3. RESET
   ============================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd,
pre {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: 600;
}

p, li, figcaption { text-wrap: pretty; }

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; }

textarea { resize: vertical; }

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--cb-line);
  margin: var(--cb-space-6) 0;
}

[hidden] { display: none; }

:target { scroll-margin-top: calc(var(--cb-header-h) + var(--cb-space-5)); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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


/* =============================================================================
   4. BASE ELEMENTS
   ============================================================================= */

body {
  min-height: 100%;
  background-color: var(--cb-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-body);
  line-height: var(--cb-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Body copy inside prose blocks gets a comfortable measure. */
p { max-width: 68ch; }

a {
  color: var(--cb-clay-400);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(255,139,87,.5);
  transition: color var(--cb-dur) var(--cb-ease),
              text-decoration-color var(--cb-dur) var(--cb-ease);
}

a:hover {
  color: var(--cb-clay-300);
  text-decoration-color: currentColor;
}

strong, b { font-weight: 600; color: var(--cb-chalk-50); }

small { font-size: var(--cb-fs-sm); }

code, kbd, samp, pre {
  font-family: var(--cb-font-mono);
  font-size: 0.9em;
}

code {
  background: var(--cb-night-800);
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  padding: 0.1em 0.35em;
}

::selection {
  background: var(--cb-clay-500);
  color: var(--cb-night-950);
}

::placeholder {
  color: var(--cb-chalk-400);
  opacity: 1;
}


/* =============================================================================
   5. FOCUS
   Visible on every focusable thing. chalk-50 ring + night halo so it reads on
   dark grounds, on cards, and on clay fills alike.
   ============================================================================= */

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--cb-focus-ring);
  outline-offset: 2px;
  border-radius: var(--cb-radius);
  box-shadow: 0 0 0 6px rgba(7,10,15,.85);
}

/* Elements that already own a pill/large radius keep their shape when focused. */
.cb-btn:focus-visible,
.cb-nav__link:focus-visible {
  border-radius: var(--cb-radius);
}


/* =============================================================================
   6. LAYOUT PRIMITIVES
   ============================================================================= */

/* Centered content column with responsive gutters. */
.cb-wrap {
  width: 100%;
  max-width: var(--cb-max);
  margin-inline: auto;
  padding-inline: var(--cb-gutter);
}

.cb-wrap--narrow { max-width: 760px; }
.cb-wrap--wide   { max-width: 1320px; }

@media (max-width: 420px) {
  .cb-wrap { padding-inline: 20px; }
}

/* Full-bleed vertical band. Pair with a cb-ground-* class. */
.cb-section {
  position: relative;
  padding-block: var(--cb-section-y);
}

.cb-section--tight { padding-block: var(--cb-section-y-tight); }
.cb-section--flush-top    { padding-block-start: 0; }
.cb-section--flush-bottom { padding-block-end: 0; }

/* Section grounds — alternate these down a page to build rhythm. */
.cb-ground-deep   { background-color: var(--cb-night-950); }
.cb-ground        { background-color: var(--cb-night-900); }
.cb-ground-raised { background-color: var(--cb-night-800); }

/* Hairline seam between adjacent bands. */
.cb-section--seam { border-block-start: 1px solid var(--cb-line); }

/* Section header block: eyebrow + heading + lead. */
.cb-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-3);
  margin-block-end: var(--cb-space-7);
  max-width: 72ch;
}

.cb-section__head--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

/* Generic vertical stack. */
.cb-stack { display: flex; flex-direction: column; gap: var(--cb-space-4); }
.cb-stack--sm { gap: var(--cb-space-2); }
.cb-stack--lg { gap: var(--cb-space-6); }

/* Horizontal group that wraps (button rows, meta rows). */
.cb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cb-space-3);
}

.cb-row--between { justify-content: space-between; }
.cb-row--center  { justify-content: center; }

/* Two-column split that collapses under 820px. */
.cb-split {
  display: grid;
  gap: clamp(var(--cb-space-6), 4vw, var(--cb-space-8));
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 820px) {
  .cb-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-split--lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}


/* =============================================================================
   7. TYPOGRAPHY CLASSES
   Display = Barlow Condensed, scoreboard authority: heavy, tight, near-caps.
   ============================================================================= */

/* Big page/section opener. Use once per page for the h1. */
.cb-display {
  font-family: var(--cb-font-display);
  font-size: var(--cb-fs-display);
  font-weight: 700;
  line-height: var(--cb-lh-display);
  letter-spacing: var(--cb-track-display);
  text-transform: uppercase;
  color: var(--cb-chalk-50);
  text-wrap: balance;
}

.cb-display--sm { font-size: var(--cb-fs-h2); }

/* Section heading. */
.cb-h2 {
  font-family: var(--cb-font-display);
  font-size: var(--cb-fs-h2);
  font-weight: 600;
  line-height: var(--cb-lh-head);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cb-chalk-50);
  text-wrap: balance;
}

/* Card / sub-section heading. Sentence case — keeps long titles readable. */
.cb-h3 {
  font-family: var(--cb-font-display);
  font-size: var(--cb-fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--cb-chalk-50);
  text-wrap: balance;
}

/* Smallest structural heading — body font, so it doesn't compete. */
.cb-h4 {
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-h4);
  font-weight: 600;
  line-height: 1.35;
  color: var(--cb-chalk-100);
}

/* Standfirst paragraph under a heading. chalk-300 = 9.8–11.7:1. */
.cb-lead {
  font-size: var(--cb-fs-lead);
  line-height: 1.52;
  color: var(--cb-chalk-300);
  max-width: 62ch;
}

/* Mono, uppercase, letterspaced, clay. The section label. 5.1–6.3:1 on night. */
.cb-eyebrow {
  display: inline-block;
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-eyebrow);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--cb-track-eyebrow);
  text-transform: uppercase;
  color: var(--cb-clay-500);
}

/* Neutral eyebrow for places where clay would be too hot. chalk-400 = 6.3–7.9:1 */
.cb-eyebrow--quiet { color: var(--cb-chalk-400); }

/* Eyebrow with a leading chalk rule — good above h2 in wide bands. */
.cb-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: var(--cb-space-3);
}

.cb-eyebrow--ruled::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--cb-clay-500);
  flex: none;
}

/* Mono utility — stat readouts, numerals, inline labels. */
.cb-mono {
  font-family: var(--cb-font-mono);
  font-size: 0.94em;
  letter-spacing: var(--cb-track-mono);
  font-variant-numeric: tabular-nums;
}

.cb-mono--caps {
  text-transform: uppercase;
  letter-spacing: var(--cb-track-eyebrow);
}

/* Secondary text. chalk-400 — the lightest chalk that clears AA on night-700. */
.cb-muted {
  color: var(--cb-text-muted);
}

.cb-muted-strong { color: var(--cb-chalk-300); }

/* Accent text. clay-500 clears AA on all three grounds. */
.cb-accent { color: var(--cb-accent); }

.cb-text-sm { font-size: var(--cb-fs-sm); }
.cb-text-xs { font-size: var(--cb-fs-xs); }

/* A measure clamp for standalone prose blocks. */
.cb-prose { max-width: 68ch; }
.cb-prose > * + * { margin-block-start: var(--cb-space-4); }


/* =============================================================================
   8. UTILITIES
   ============================================================================= */

/* Screen-reader only, not focusable. */
.cb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Screen-reader only until focused (used by the skip link's inner pattern). */
.cb-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element in <body>. */
.cb-skip-link {
  position: absolute;
  top: 0;
  left: var(--cb-space-4);
  z-index: 200;
  transform: translateY(-140%);
  display: inline-block;
  padding: var(--cb-space-3) var(--cb-space-5);
  background: var(--cb-clay-500);
  color: var(--cb-night-950);
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-xs);
  font-weight: 500;
  letter-spacing: var(--cb-track-mono);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--cb-radius) var(--cb-radius);
  transition: transform var(--cb-dur) var(--cb-ease);
}

.cb-skip-link:focus-visible,
.cb-skip-link:focus {
  transform: translateY(0);
  color: var(--cb-night-950);
}

/* Alignment + flow helpers. */
.cb-center     { text-align: center; }
.cb-center-x   { margin-inline: auto; }
.cb-nowrap     { white-space: nowrap; }
.cb-full       { width: 100%; max-width: none; }

/* Hairline dividers. */
.cb-rule        { border-block-start: 1px solid var(--cb-line); }
.cb-rule-strong { border-block-start: 1px solid var(--cb-line-strong); }

/* Spacing escape hatches — use sparingly; prefer .cb-stack. */
.cb-mt-0 { margin-block-start: 0; }
.cb-mt-3 { margin-block-start: var(--cb-space-4); }
.cb-mt-5 { margin-block-start: var(--cb-space-6); }
.cb-mt-7 { margin-block-start: var(--cb-space-7); }
.cb-mb-5 { margin-block-end: var(--cb-space-6); }

/* Decorative elements must not be announced; pair with aria-hidden in markup. */
.cb-decor {
  pointer-events: none;
  user-select: none;
}