/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 *
 * index.html:
 *   nav        → transparent-on-dark (scrolled: solid #1A3C34)
 *   hero       → DARK  (#1A3C34)   | text: #F5F1EB white-cream
 *   social-proof → CREAM (#F2EFE8) | text: #1A2A24 dark
 *   problem    → LIGHT (#FAF9F6)   | text: #1A2A24 dark
 *   platform-overview → LIGHT      | text: #1A2A24 dark
 *   how-it-works → DARK (#1A3C34)  | text: #F5F1EB
 *   metrics-strip → DARK (#1A3C34) | text: #F5F1EB
 *   testimonials → LIGHT (#FAF9F6) | text: #1A2A24
 *   integrations → CREAM (#F2EFE8) | text: #1A2A24
 *   cta-band   → DARK (#0F2B25)   | text: #F5F1EB
 *   footer     → DARK (#0F2B25)   | text: #F5F1EB / #A8C4BC
 *
 * product.html / integrations.html / pricing.html:
 *   nav        → transparent-on-light (scrolled: solid #1A3C34)
 *   hero       → LIGHT (#FAF9F6)   | text: #1A2A24
 *   sections   → LIGHT / CREAM alternating
 *   platform-diagram → DARK
 *   cta/footer → DARK
 *
 * customers.html / about.html:
 *   nav        → transparent-on-dark (scrolled: solid #1A3C34)
 *   hero       → DARK (#1A3C34)   | text: #F5F1EB
 *   sections   → LIGHT / CREAM
 *   cta/footer → DARK
 *
 * blog/* / legal/* / login/* / contact.html:
 *   nav        → transparent-on-light (scrolled: solid #1A3C34)
 *   content    → LIGHT / WHITE
 *   footer     → DARK
 *
 * NAV RULE:
 *   dark-top pages → nav link color: white (#F5F1EB); logo: logo-light.svg
 *   light-top pages → nav link color: dark (#1A2A24); logo: logo-dark.svg
 *   scrolled (both) → solid #1A3C34 bg; link color: white; logo: logo-light.svg
 *   Adjacent dark→dark sections: border separator or shade step
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --svyn-brand:            #1A3C34;
  --svyn-brand-alt:        #0F2B25;
  --svyn-accent-deco:      #E8622A;
  --svyn-accent-light:     #C44E1E;  /* AA on light bg */
  --svyn-accent-dark:      #F0855A;  /* AA on dark bg */

  /* Foreground tokens */
  --svyn-fg-light-1:       #1A2A24;  /* primary text on light */
  --svyn-fg-light-2:       #4A5C54;  /* secondary text on light */
  --svyn-fg-dark-1:        #F5F1EB;  /* primary text on dark */
  --svyn-fg-dark-2:        #A8C4BC;  /* secondary text on dark */

  /* Background tokens */
  --svyn-bg-light:         #FAF9F6;
  --svyn-bg-white:         #FFFFFF;
  --svyn-bg-cream:         #F2EFE8;
  --svyn-bg-dark:          #1A3C34;
  --svyn-bg-dark-alt:      #0F2B25;
  --svyn-bg-highlight:     #EBF5F2;

  /* Border */
  --svyn-border-light:     rgba(26, 42, 36, 0.12);
  --svyn-border-dark:      rgba(245, 241, 235, 0.12);

  /* Spacing */
  --svyn-section-pad:      clamp(4rem, 8vw, 7rem);
  --svyn-container-max:    1200px;
  --svyn-container-pad:    clamp(1.25rem, 5vw, 2.5rem);

  /* Radius */
  --svyn-radius:           8px;
  --svyn-radius-lg:        16px;

  /* Shadows */
  --svyn-shadow-sm:        0 1px 3px rgba(26, 42, 36, 0.08), 0 1px 2px rgba(26, 42, 36, 0.04);
  --svyn-shadow-md:        0 4px 12px rgba(26, 42, 36, 0.10), 0 2px 4px rgba(26, 42, 36, 0.06);
  --svyn-shadow-lg:        0 12px 32px rgba(26, 42, 36, 0.12), 0 4px 8px rgba(26, 42, 36, 0.06);

  /* Typography scale */
  --svyn-display:          clamp(2.5rem, 5vw, 4rem);
  --svyn-h1:               clamp(2rem, 4vw, 3.25rem);
  --svyn-h2:               clamp(1.5rem, 2.5vw, 2.25rem);
  --svyn-h3:               clamp(1.125rem, 2vw, 1.5rem);
  --svyn-body:             1rem;
  --svyn-small:            0.875rem;
  --svyn-eyebrow-size:     0.75rem;
  --svyn-eyebrow-track:    0.12em;

  /* Motion */
  --svyn-ease:             200ms ease;
  --svyn-ease-out:         300ms cubic-bezier(0.16, 1, 0.3, 1);
}