/* ==========================================================================
   BUSAC DESIGN TOKENS
   One source of truth. Do not hardcode variants of these values elsewhere.
   ========================================================================== */

:root {
  /* ---- Color: core ---- */
  --ink: #0b1520;            /* primary dark */
  --ink-2: #101d2b;          /* secondary dark */
  --paper: #f4f2ec;          /* primary light */
  --blue: #2e62e8;           /* primary accent on light */
  --blue-soft: #7aa0ff;      /* accent on dark */

  /* ---- Color: evidence / verification only ---- */
  --green: #1e8a5e;          /* verified, light surfaces */
  --green-dark-surface: #3dbe8b;

  /* ---- Color: decision gate (dark sections) ---- */
  --gate-scale: #7ed9ae;
  --gate-modify: #e8c27a;
  --gate-stop: #e89a8a;

  /* ---- Color: decision gate support (light surfaces) ---- */
  --amber-light: #c98a2b;
  --stop-light: #b4432f;

  /* ---- Color: lines & muted text ---- */
  --line-on-dark: rgba(244, 242, 236, 0.14);
  --muted-on-dark: rgba(244, 242, 236, 0.62);
  --line-on-light: rgba(11, 21, 32, 0.14);
  --muted-on-light: rgba(11, 21, 32, 0.62);

  /* ---- Typography ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-hero: clamp(2.6rem, 6.2vw, 4.9rem);
  --fs-h1: clamp(2.2rem, 4.8vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.08rem, 1.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.72rem;

  /* ---- Grid / containers ---- */
  --container: 1300px;
  --gutter: clamp(20px, 5vw, 80px);

  /* ---- Section spacing ---- */
  --space-section: clamp(72px, 12vw, 168px);
  --space-section-sm: clamp(56px, 8vw, 112px);
  --space-block: clamp(28px, 4vw, 56px);

  /* ---- Nav ---- */
  --nav-height: 78px;

  /* ---- Borders ---- */
  --radius: 2px;
  --rule: 1px solid var(--line-on-light);
  --rule-dark: 1px solid var(--line-on-dark);

  /* ---- Motion ---- */
  --dur-micro: 200ms;
  --dur-section: 550ms;
  --dur-system: 1100ms;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-menu: 110;

  /* ---- Semantic (light surface defaults) ---- */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--muted-on-light);
  --line: var(--line-on-light);
  --accent: var(--blue);
  --verified: var(--green);
}

/* Dark-surface semantic remap: add .surface-dark (or .section--dark).
   Heroes are always dark, so they get the remap too. */
.surface-dark,
.section--dark,
.hero {
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: var(--muted-on-dark);
  --line: var(--line-on-dark);
  --accent: var(--blue-soft);
  --verified: var(--green-dark-surface);
}