/* ============================================================================
   BDD DESIGN SYSTEM — single source of design truth (v1, 2026-07)
   Loaded LAST in <head> on every page so it authoritatively normalizes the
   per-page token drift that had accumulated across the site.

   SCOPE / SAFETY
   - Additive + normalizing only. No page markup, no form fields, no JS logic
     are changed by this file.
   - We re-declare the CSS custom properties the pages ALREADY consume via
     var(), collapsing drifted values (muted / faint / border / danger) to one
     locked value each — this unifies color + contrast site-wide with zero
     structural edits.
   - Base-element rules are conservative (typography, links, focus, form
     controls, media). We do NOT aggressively restyle bare <button> so bespoke
     per-page buttons keep their geometry; canonical components are opt-in
     `.ds-*` classes.
   ==========================================================================*/

/* ---------------------------------------------------------------------------
   1. LOCKED TOKENS  (extracted from live CSS; drift resolved to one value)
   Brand core was already consistent: bg #080D1A, gold #C9A84C, teal #00D4AA,
   text #F0EDE8. Drift resolved below toward the higher-contrast existing
   value (accessibility is a premium tell), never an invented one.
   ------------------------------------------------------------------------- */
:root {
  /* Color — surfaces */
  --bg:        #080D1A;          /* near-black navy (all pages agreed) */
  --bg2:       #0D1528;
  --bg3:       #111F3A;
  --surface:   rgba(255,255,255,0.025);   /* was --card */
  --surface-h: rgba(255,255,255,0.045);   /* was --card-h */

  /* Color — text (locked to the higher-contrast variants that index/consulting
     used: #A4B0C8 / #6B7A96 — better a11y than the #8A94A8/#3a4560 drift) */
  --text:       #F0EDE8;
  --text-muted: #A4B0C8;   /* was #A4B0C8 vs #8A94A8  -> lock lighter */
  --text-faint: #6B7A96;   /* was #6B7A96 vs #3a4560  -> lock lighter */

  /* Color — brand accents */
  --accent:       #C9A84C;                 /* gold */
  --accent-hover: #D8B96A;                 /* one hover tint (was ad-hoc) */
  --accent-dim:   #A8893D;
  --accent-glow:  rgba(201,168,76,0.12);
  --accent-glow-sm: rgba(201,168,76,0.06);
  --teal:         #00D4AA;
  --teal-glow:    rgba(0,212,170,0.08);

  /* Color — lines + status */
  --border:       rgba(255,255,255,0.06);  /* was .06 vs .07 -> lock .06 */
  --border-strong:rgba(255,255,255,0.14);
  --border-gold:  rgba(201,168,76,0.20);
  --border-teal:  rgba(0,212,170,0.20);
  --danger:       #E05A5A;                  /* matches existing JS error + onboarding --red */
  --danger-bg:    rgba(224,90,90,0.07);
  --danger-border:rgba(224,90,90,0.20);
  --success:      #00D4AA;                  /* reuse teal for success (already used) */
  --success-bg:   rgba(0,212,170,0.08);
  --success-border:rgba(0,212,170,0.25);

  /* Keep legacy alias names alive so any page referencing them stays unified */
  --gold: var(--accent);
  --gold-dim: var(--accent-dim);
  --gold-glow: var(--accent-glow);
  --gold-glow-sm: var(--accent-glow-sm);
  --gold-border: var(--border-gold);
  --white: var(--text);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --card: var(--surface);
  --card-h: var(--surface-h);
  --red: var(--danger);
  --border-h: var(--border-strong);

  /* Typography — one pairing already loaded: Outfit (headings) + DM Sans (body) */
  --font-head: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;

  /* Type scale — one modular scale (px), replaces the 73 ad-hoc rem sizes */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-48: 3rem;
  --lh-tight: 1.2;
  --lh-normal: 1.6;

  /* Spacing scale — 4/8/12/16/24/32/48/64 only */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius — one scale (collapses the ~19 ad-hoc radii) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 100px;
  --r-round: 50%;

  /* Shadow — one scale (collapses the ~20 ad-hoc shadows) */
  --sh-1: 0 1px 2px rgba(0,0,0,0.25);
  --sh-2: 0 8px 24px rgba(0,0,0,0.35);
  --sh-3: 0 24px 64px rgba(0,0,0,0.45);

  /* Layout + motion (already agreed on most pages; lock for the stragglers) */
  --nav-h: 72px;
  --max-w: 1200px;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --fast: 0.18s;
  --med: 0.35s;
  --slow: 0.6s;
}

/* ---------------------------------------------------------------------------
   2. CONSERVATIVE BASE NORMALIZATION (no layout geometry changes)
   ------------------------------------------------------------------------- */

/* Kill horizontal scroll site-wide (mobile premium tell) + fluid media */
html, body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Unify heading font — this alone removes the 404 "Syne" outlier */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); }

/* Form controls inherit the body font consistently across all forms */
input, select, textarea, button { font-family: inherit; }

/* Premium accessibility tell: one consistent focus ring everywhere.
   :focus-visible only, so mouse users don't see rings but keyboard users do. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Consistent text selection color */
::selection { background: var(--accent-glow); color: var(--text); }

/* Respect reduced-motion (premium + a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   3. CANONICAL COMPONENT VOCABULARY  (opt-in `.ds-*` classes)
   One style each for buttons / inputs / cards / badges / links / section
   headers. Forms can adopt these on their CONTAINERS without changing any
   field id/name/handler.
   ------------------------------------------------------------------------- */

/* Layout */
.ds-container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-6); }
.ds-section   { padding-block: var(--sp-16); }
.ds-section--tight { padding-block: var(--sp-12); }

/* Section header */
.ds-eyebrow {
  font-family: var(--font-head); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.ds-h2 { font-family: var(--font-head); font-size: var(--fs-32); line-height: var(--lh-tight); color: var(--text); font-weight: 700; }
.ds-lead { font-size: var(--fs-18); line-height: var(--lh-normal); color: var(--text-muted); }

/* Buttons */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-head); font-size: var(--fs-16); font-weight: 600;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
              border-color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:disabled, .ds-btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }
.ds-btn--primary   { background: var(--accent); color: #0A0A0A; }
.ds-btn--primary:hover { background: var(--accent-hover); }
.ds-btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.ds-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }
.ds-btn--ghost     { background: transparent; color: var(--text-muted); }
.ds-btn--ghost:hover { color: var(--accent); }

/* Inputs / selects / textarea */
.ds-input, .ds-select, .ds-textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-16); line-height: var(--lh-normal);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-faint); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-h);
}

/* Cards */
.ds-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-1);
}
.ds-card:hover { border-color: var(--border-strong); }

/* Badges */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--font-head); font-size: var(--fs-12); font-weight: 600;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-gold);
}

/* Links */
.ds-link { color: var(--teal); text-decoration: none; transition: color var(--fast) var(--ease); }
.ds-link:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   4. STATES  (loading / error / success / empty) — one styled vocabulary
   ------------------------------------------------------------------------- */

/* Spinner (matches the existing .btn-spinner hook used by the lead form) */
.ds-spinner, .btn-spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: var(--r-round); animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Skeleton */
.ds-skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-h) 37%, var(--surface) 63%);
  background-size: 400% 100%; border-radius: var(--r-sm);
  animation: ds-shimmer 1.4s ease infinite; min-height: 1em;
}
@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Error — one --danger component (matches existing inline JS error styling) */
.ds-error {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-14);
  margin-top: var(--sp-3); background: var(--danger-bg);
  border: 1px solid var(--danger-border); color: var(--danger);
}
/* Success */
.ds-success {
  padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-16);
  background: var(--success-bg); border: 1px solid var(--success-border); color: var(--text);
}
/* Empty */
.ds-empty { padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--text-faint); font-size: var(--fs-14); }

/* ---------------------------------------------------------------------------
   5. RESPONSIVE / MOBILE GUARDS (375px premium pass)
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .ds-container { padding-inline: var(--sp-4); }
  .ds-h2 { font-size: var(--fs-24); }
  /* Prevent flex/grid children from forcing horizontal overflow */
  .ds-card, .ds-section, .ds-container { min-width: 0; }
}
