/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 * DARK-TOP PAGES (body.wsq-page--dark-top):
 *   nav        → transparent-on-dark (scrolled: solid #0B1C2C)
 *   logo       → logo-light.svg (white wordmark on dark bg)
 *   nav links  → color: #EDF2F7 (white-ish on dark)
 *
 * index.html:          dark → dark-alt → light → dark → light-alt → dark → brand → light → light-alt → dark
 * platform/index.html: dark → light → dark → light → dark
 * about.html:          dark → light → light-alt → dark → dark
 * team.html:           dark → light
 * contact.html:        dark → light
 * login/*.html:        dark (full page)
 * solutions/index.html: dark → light → light-alt → dark
 * solutions/municipal: dark → light → dark → light → light-alt → dark
 *
 * LIGHT-TOP PAGES (body.wsq-page--light-top):
 *   nav        → solid #0B1C2C (forced dark, NOT transparent)
 *   logo       → logo-dark.svg — WAIT: nav is dark even on light-top pages → logo-light.svg
 *   nav links  → color: #EDF2F7
 *
 * case-studies/*.html: light → white (or light → white → light → dark → light → dark)
 * resources/*.html:    light → white → light → dark
 * pricing.html:        light → white → light → white → dark
 * careers.html:        light → white → light → dark
 * status.html:         light → white → light
 * legal/*.html:        light → white
 *
 * NOTE: Nav is always dark (#0B1C2C solid) on light-top pages.
 *       On dark-top pages: transparent at scroll=0, solid #0B1C2C on scroll.
 *       Therefore: nav links and logo are ALWAYS on dark bg → always use light colors.
 *       Dark-top pages: body bg = #0B1C2C (so transparent nav shows correct dark bg)
 *
 * Adjacent same-polarity separator needed:
 *   dark → dark-alt: 1px border rgba(255,255,255,0.08)
 *   light → light-alt: 1px border rgba(0,0,0,0.06)
 *   dark → dark (about team-preview → cta): shade step bg_dark_alt
 * ═══════════════════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  --wsq-dark:         #0B1C2C;
  --wsq-dark-alt:     #0F253A;
  --wsq-data-surf:    #112235;
  --wsq-teal:         #0ABFAA;
  --wsq-teal-aa:      #007D6E;
  --wsq-light:        #F4F7FA;
  --wsq-light-alt:    #E8EFF6;
  --wsq-white:        #FFFFFF;

  /* Foreground tokens */
  --wsq-fg-dark-primary:   #EDF2F7;
  --wsq-fg-dark-secondary: #8FAFC8;
  --wsq-fg-light-primary:  #0B1C2C;
  --wsq-fg-light-secondary:#3D5166;

  /* Border tokens */
  --wsq-border-dark:  #1E3A52;
  --wsq-border-light: #C8D8E8;

  /* Status */
  --wsq-alert:    #F5A623;
  --wsq-critical: #E5384A;
  --wsq-healthy:  #2BC48A;

  /* Typography */
  --wsq-font-head: 'DM Sans', system-ui, -apple-system, sans-serif;
  --wsq-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --wsq-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Scale */
  --wsq-h1: clamp(2.4rem, 4vw, 3.6rem);
  --wsq-h2: clamp(1.75rem, 3vw, 2.5rem);
  --wsq-h3: 1.25rem;

  /* Spacing */
  --wsq-section-pad: clamp(64px, 8vw, 120px);
  --wsq-container:   1240px;
  --wsq-gap:         clamp(24px, 3vw, 40px);
  --wsq-card-pad:    32px;

  /* Nav */
  --wsq-nav-h: 68px;

  /* Radius */
  --wsq-radius-sm: 4px;
  --wsq-radius-md: 8px;
  --wsq-radius-lg: 12px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--wsq-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--wsq-fg-light-primary);
  background: var(--wsq-white);
}
/* Dark-top pages: body bg matches dark hero so transparent nav shows correct color */
body.wsq-page--dark-top {
  background: var(--wsq-dark);
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--wsq-font-head);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: var(--wsq-h1); }
h2 { font-size: var(--wsq-h2); }
h3 { font-size: var(--wsq-h3); }

/* ── Container ──────────────────────────────────────────────── */
.wsq-container {
  max-width: var(--wsq-container);
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

/* ── Section backgrounds ────────────────────────────────────── */
.wsq-section--dark     { background: var(--wsq-dark);     }
.wsq-section--dark-alt { background: var(--wsq-dark-alt); }
.wsq-section--data     { background: var(--wsq-data-surf);}
.wsq-section--light    { background: var(--wsq-light);    }
.wsq-section--light-alt{ background: var(--wsq-light-alt);}
.wsq-section--white    { background: var(--wsq-white);    }
.wsq-section--brand    { background: var(--wsq-teal);     }

/* ── Section padding ────────────────────────────────────────── */
.wsq-section {
  padding-top: var(--wsq-section-pad);
  padding-bottom: var(--wsq-section-pad);
}
.wsq-section--narrow {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* ── Text helpers in sections ───────────────────────────────── */
.wsq-section--dark h1,
.wsq-section--dark h2,
.wsq-section--dark h3,
.wsq-section--dark h4,
.wsq-section--dark p,
.wsq-section--dark li {
  color: var(--wsq-fg-dark-primary);
}
.wsq-section--dark-alt h1,
.wsq-section--dark-alt h2,
.wsq-section--dark-alt h3,
.wsq-section--dark-alt p,
.wsq-section--dark-alt li {
  color: var(--wsq-fg-dark-primary);
}
.wsq-section--data h1,
.wsq-section--data h2,
.wsq-section--data h3,
.wsq-section--data p,
.wsq-section--data li {
  color: var(--wsq-fg-dark-primary);
}
.wsq-section--brand h1,
.wsq-section--brand h2,
.wsq-section--brand h3,
.wsq-section--brand p,
.wsq-section--brand li {
  color: var(--wsq-dark);
}
.wsq-section--light h1,
.wsq-section--light h2,
.wsq-section--light h3,
.wsq-section--light h4,
.wsq-section--light p,
.wsq-section--light li {
  color: var(--wsq-fg-light-primary);
}
.wsq-section--light-alt h1,
.wsq-section--light-alt h2,
.wsq-section--light-alt h3,
.wsq-section--light-alt p,
.wsq-section--light-alt li {
  color: var(--wsq-fg-light-primary);
}
.wsq-section--white h1,
.wsq-section--white h2,
.wsq-section--white h3,
.wsq-section--white h4,
.wsq-section--white p,
.wsq-section--white li {
  color: var(--wsq-fg-light-primary);
}

/* Secondary text helpers */
.wsq-text-muted-dark  { color: var(--wsq-fg-dark-secondary) !important; }
.wsq-text-muted-light { color: var(--wsq-fg-light-secondary) !important; }
.wsq-text-teal        { color: var(--wsq-teal); }
.wsq-text-teal-aa     { color: var(--wsq-teal-aa); }

/* ── Eyebrow / label ────────────────────────────────────────── */
.wsq-eyebrow {
  font-family: var(--wsq-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.75rem;
}
.wsq-section--dark .wsq-eyebrow,
.wsq-section--dark-alt .wsq-eyebrow,
.wsq-section--data .wsq-eyebrow { color: var(--wsq-teal); }
.wsq-section--light .wsq-eyebrow,
.wsq-section--light-alt .wsq-eyebrow,
.wsq-section--white .wsq-eyebrow { color: var(--wsq-teal-aa); }
.wsq-section--brand .wsq-eyebrow { color: var(--wsq-dark); opacity: 0.7; }

/* ── Buttons ────────────────────────────────────────────────── */
.wsq-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wsq-font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.7em 1.6em;
  border-radius: var(--wsq-radius-md);
  border: 2px solid transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}
.wsq-btn--primary {
  background: var(--wsq-teal);
  color: var(--wsq-dark);
  border-color: var(--wsq-teal);
}
.wsq-btn--primary:hover {
  background: #09A895;
  border-color: #09A895;
}
.wsq-btn--ghost-dark {
  background: transparent;
  color: var(--wsq-fg-dark-primary);
  border-color: rgba(255,255,255,0.35);
}
.wsq-btn--ghost-dark:hover {
  border-color: var(--wsq-teal);
  color: var(--wsq-teal);
}
.wsq-btn--outline-light {
  background: transparent;
  color: var(--wsq-dark);
  border-color: var(--wsq-dark);
}
.wsq-btn--outline-light:hover {
  background: var(--wsq-dark);
  color: var(--wsq-white);
}
.wsq-btn--outline-dark {
  background: transparent;
  color: var(--wsq-fg-dark-primary);
  border-color: var(--wsq-border-dark);
}
.wsq-btn--outline-dark:hover {
  background: rgba(255,255,255,0.08);
}
.wsq-btn--sm {
  font-size: 0.8125rem;
  padding: 0.5em 1.1em;
}
.wsq-btn--text-teal {
  background: transparent;
  border: none;
  color: var(--wsq-teal-aa);
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wsq-section--dark .wsq-btn--text-teal,
.wsq-section--dark-alt .wsq-btn--text-teal { color: var(--wsq-teal); }

/* ── Section header helper ──────────────────────────────────── */
.wsq-section-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.wsq-section-head--center {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.wsq-section-head h2 { margin-bottom: 0.5rem; }
.wsq-section-head p  { font-size: 1.0625rem; line-height: 1.65; }

/* ── Grid utilities ─────────────────────────────────────────── */
.wsq-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wsq-gap);
}
.wsq-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wsq-gap);
}
.wsq-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wsq-gap);
}
@media (max-width: 900px) {
  .wsq-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .wsq-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wsq-grid-2,
  .wsq-grid-3,
  .wsq-grid-4 { grid-template-columns: 1fr; }
}

/* ── Dividers ───────────────────────────────────────────────── */
.wsq-divider--dark  { border: none; border-top: 1px solid var(--wsq-border-dark); }
.wsq-divider--light { border: none; border-top: 1px solid var(--wsq-border-light); }

/* ── Badges / tags ──────────────────────────────────────────── */
.wsq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wsq-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--wsq-radius-sm);
  letter-spacing: 0.04em;
}
.wsq-badge--teal      { background: rgba(10,191,170,0.15); color: var(--wsq-teal); }
.wsq-badge--alert     { background: rgba(245,166,35,0.15);  color: var(--wsq-alert); }
.wsq-badge--critical  { background: rgba(229,56,74,0.15);   color: var(--wsq-critical); }
.wsq-badge--healthy   { background: rgba(43,196,138,0.15);  color: var(--wsq-healthy); }

/* ── Monospace data ─────────────────────────────────────────── */
.wsq-mono {
  font-family: var(--wsq-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ── Responsive utils ───────────────────────────────────────── */
.wsq-desktop-only { display: block; }
.wsq-mobile-only  { display: none; }
@media (max-width: 768px) {
  .wsq-desktop-only { display: none; }
  .wsq-mobile-only  { display: block; }
}

/* ── Fade-in animation ──────────────────────────────────────── */
.wsq-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.wsq-fade-in.wsq-visible {
  opacity: 1;
  transform: none;
}
/* Failsafe: after 1.2s all fade-ins become visible regardless */
@keyframes wsq-failsafe-reveal {
  to { opacity: 1; transform: none; }
}
.wsq-fade-in {
  animation: wsq-failsafe-reveal 0.01s 1.2s forwards;
}

/* ── Legal page body ────────────────────────────────────────── */
.wsq-legal-body {
  padding: clamp(40px, 6vw, 80px) 0;
}
body.wsq-page--light-top .wsq-legal-body h1,
body.wsq-page--light-top .wsq-legal-body h2,
body.wsq-page--light-top .wsq-legal-body h3,
body.wsq-page--light-top .wsq-legal-body p,
body.wsq-page--light-top .wsq-legal-body li,
body.wsq-page--light-top .wsq-legal-body address {
  color: var(--wsq-fg-light-primary);
}
body.wsq-page--light-top .wsq-legal-body h2 { margin-bottom: 0.75rem; margin-top: 2rem; }
body.wsq-page--light-top .wsq-legal-body h3 { margin-bottom: 0.5rem; margin-top: 1.25rem; }
body.wsq-page--light-top .wsq-legal-body p  { margin-bottom: 0.875rem; }
body.wsq-page--light-top .wsq-legal-body ul,
body.wsq-page--light-top .wsq-legal-body ol { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.875rem; }
body.wsq-page--light-top .wsq-legal-body a  { color: var(--wsq-teal-aa); text-decoration: underline; }
body.wsq-page--light-top .wsq-legal-body address { font-style: normal; line-height: 1.8; }
.legal-header { margin-bottom: 2rem; }
.legal-meta   { color: var(--wsq-fg-light-secondary); font-size: 0.875rem; margin-top: 0.25rem; }
.legal-table  { border-collapse: collapse; width: 100%; font-size: 0.875rem; margin: 1rem 0 1.5rem; }
.legal-table th,
.legal-table td { border: 1px solid var(--wsq-border-light); padding: 8px 12px; text-align: left; }
.legal-table th { background: var(--wsq-light-alt); font-weight: 600; }