/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 *
 * DARK-TOP pages (body.tvyx-page--dark-top):
 *   nav        → transparent (scrollY=0) / solid #0B1C2E (scrolled) | text: white
 *   index.html:  dark → dark → dark-alt → light → light-alt → dark → light → brand → light → dark
 *   how-it-works: dark → dark → light → light-alt → dark → light → dark-alt → dark
 *   for-sponsors: dark → dark → light → light-alt → dark → light → dark-alt → dark
 *   for-sites:    dark → dark → light → light-alt → dark → light → dark-alt → dark
 *   platform:     dark → dark → light → light-alt → dark → dark-alt → dark
 *   login pages:  dark → light (auth section) → dark
 *
 * LIGHT-TOP pages (body.tvyx-page--light-top):
 *   nav        → solid #0B1C2E (forced) | text: white
 *   case-studies: light → light → light → dark → dark
 *   pricing:    light → light → white → light-alt → dark-alt → dark
 *   about:      light → light → white → light-alt → light → dark → dark
 *   team:       light → light → white → light-alt → dark-alt → dark
 *   blog/index: light → light → white → light-alt → dark
 *   blog articles: light → light → white → dark
 *   contact:    light → light → white → dark
 *   legal:      light → white → dark
 *
 * KEY INSIGHT:
 *   - Nav is ALWAYS solid #0B1C2E on light-top pages (forced)
 *   - Nav is transparent→solid on dark-top pages
 *   - Logo: dark-top pages → logo-light.svg | light-top pages → logo-dark.svg
 *   - Footer: ALWAYS dark (#0B1C2E) across all pages
 *   - body.tvyx-page--dark-top must have background: var(--tvyx-bg-dark) so
 *     transparent nav shows dark bg at scrollY=0
 *
 * Adjacent same-polarity sections:
 *   - index dark→dark: nav→hero (same dark — hero starts below nav, OK)
 *   - case-studies light→light→light: needs subtle border-bottom separators
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ CSS CUSTOM PROPERTIES ═══ */
:root {
  /* Brand palette */
  --tvyx-navy: #0B1C2E;
  --tvyx-navy-alt: #0F2540;
  --tvyx-teal: #00B8A0;
  --tvyx-teal-aa-light: #007A6B;   /* AA on light bg */
  --tvyx-teal-aa-dark: #00D4B8;    /* AA on dark bg */

  /* Foreground tokens */
  --tvyx-fg-dark-primary: #E8F4F2;    /* white-ish, for dark bg */
  --tvyx-fg-dark-secondary: #8AB5C0;
  --tvyx-fg-dark-muted: #5E8A96;
  --tvyx-fg-light-primary: #0B1C2E;   /* navy, for light bg */
  --tvyx-fg-light-secondary: #3D5A73;
  --tvyx-fg-light-muted: #617D8E;

  /* Background tokens */
  --tvyx-bg-dark: #0B1C2E;
  --tvyx-bg-dark-alt: #0F2540;
  --tvyx-bg-light: #F5F9F8;
  --tvyx-bg-light-alt: #EAF4F2;
  --tvyx-bg-teal-light: #E6F8F5;
  --tvyx-bg-white: #FFFFFF;
  --tvyx-bg-brand: #00B8A0;  /* teal band */

  /* Border tokens */
  --tvyx-border-light: #D0E8E3;
  --tvyx-border-dark: #1A3550;

  /* Typography */
  --tvyx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tvyx-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Spacing */
  --tvyx-section-py: 96px;
  --tvyx-section-py-sm: 64px;
  --tvyx-container-max: 1180px;
  --tvyx-card-padding: 32px;
  --tvyx-radius-card: 12px;
  --tvyx-radius-btn: 8px;
  --tvyx-radius-pill: 999px;
}

/* ═══ CSS RESET / BASE ═══ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--tvyx-font-sans);
  font-size: 16px;
  line-height: 1.625;
  color: var(--tvyx-fg-light-primary);
  background: var(--tvyx-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark-top pages: body bg must be dark so transparent nav shows dark at scrollY=0 */
body.tvyx-page--dark-top {
  background: var(--tvyx-bg-dark);
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ═══ TYPOGRAPHY ═══ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tvyx-font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(36px, 4.5vw, 52px); line-height: 1.1; }
h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.2; }
h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
h4 { font-size: 18px; line-height: 1.35; }
h5 { font-size: 16px; line-height: 1.4; }

p { line-height: 1.625; }

/* Eyebrow label style */
.tvyx-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
/* Eyebrow color scoped to container bg — NOT global */
.tvyx-section--light .tvyx-eyebrow,
.tvyx-section--white .tvyx-eyebrow,
.tvyx-section--light-alt .tvyx-eyebrow {
  color: var(--tvyx-teal-aa-light);
}
.tvyx-section--dark .tvyx-eyebrow,
.tvyx-section--dark-alt .tvyx-eyebrow,
.tvyx-section--brand .tvyx-eyebrow {
  color: var(--tvyx-teal-aa-dark);
}
/* Hero-specific eyebrow (dark bg hero) */
.tvyx-hero--dark .tvyx-eyebrow,
.tvyx-subhero--dark .tvyx-eyebrow {
  color: var(--tvyx-teal-aa-dark);
}
/* Hero-specific eyebrow (light bg hero) */
.tvyx-hero--light .tvyx-eyebrow,
.tvyx-subhero--light .tvyx-eyebrow {
  color: var(--tvyx-teal-aa-light);
}

/* Mono stats */
.tvyx-stat-num {
  font-family: var(--tvyx-font-mono);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ═══ LAYOUT CONTAINERS ═══ */
.tvyx-container {
  max-width: var(--tvyx-container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

.tvyx-section {
  padding: var(--tvyx-section-py) 0;
}

.tvyx-section--sm {
  padding: var(--tvyx-section-py-sm) 0;
}

/* Section background variants */
.tvyx-section--dark {
  background: var(--tvyx-bg-dark);
  color: var(--tvyx-fg-dark-primary);
}
.tvyx-section--dark-alt {
  background: var(--tvyx-bg-dark-alt);
  color: var(--tvyx-fg-dark-primary);
}
.tvyx-section--light {
  background: var(--tvyx-bg-light);
  color: var(--tvyx-fg-light-primary);
}
.tvyx-section--light-alt {
  background: var(--tvyx-bg-light-alt);
  color: var(--tvyx-fg-light-primary);
}
.tvyx-section--white {
  background: var(--tvyx-bg-white);
  color: var(--tvyx-fg-light-primary);
}
.tvyx-section--brand {
  background: var(--tvyx-bg-brand);
  color: var(--tvyx-bg-dark);
}
.tvyx-section--teal-light {
  background: var(--tvyx-bg-teal-light);
  color: var(--tvyx-fg-light-primary);
}

/* Text on dark sections */
.tvyx-section--dark h1,
.tvyx-section--dark h2,
.tvyx-section--dark h3,
.tvyx-section--dark h4 {
  color: var(--tvyx-fg-dark-primary);
}
.tvyx-section--dark p,
.tvyx-section--dark li {
  color: var(--tvyx-fg-dark-secondary);
}
.tvyx-section--dark-alt h1,
.tvyx-section--dark-alt h2,
.tvyx-section--dark-alt h3,
.tvyx-section--dark-alt h4 {
  color: var(--tvyx-fg-dark-primary);
}
.tvyx-section--dark-alt p,
.tvyx-section--dark-alt li {
  color: var(--tvyx-fg-dark-secondary);
}

/* ═══ GRID UTILITIES ═══ */
.tvyx-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.tvyx-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.tvyx-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ═══ RESPONSIVE BREAKPOINTS ═══ */
@media (max-width: 1024px) {
  .tvyx-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root {
    --tvyx-section-py: 64px;
    --tvyx-section-py-sm: 48px;
  }
  .tvyx-grid-2,
  .tvyx-grid-3,
  .tvyx-grid-4 { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
}

/* ═══ FOCUS STYLES (accessibility) ═══ */
:focus-visible {
  outline: 2px solid var(--tvyx-teal);
  outline-offset: 3px;
  border-radius: 4px;
}