/**
 * Design tokens for Top SEO Agency.
 *
 * Brand colors (--tsa-primary, --tsa-secondary, and derived shades) are
 * NOT defined here — they're generated server-side from the two
 * Customizer color pickers and injected as an inline <style> block in
 * wp_head (see inc/color-tools.php). The dark-navy header/hero/team/
 * final-CTA/footer sections use --tsa-primary directly and stay
 * constant across Light/Dark mode (a brand color, not a mode-dependent
 * surface) — only the neutral tokens below (bg/bg-alt/surface/text)
 * flip between modes.
 */

:root {
  --tsa-bg: #ffffff;
  --tsa-bg-alt: #faf6ef;
  --tsa-surface: #ffffff;
  --tsa-surface-raised: #ffffff;
  --tsa-text: #1b1d22;
  --tsa-text-muted: #5c6068;
  --tsa-border: #e7e3da;
  --tsa-input-bg: #ffffff;
  --tsa-input-border: #dcd7cb;
  --tsa-shadow-color: rgba(20, 24, 32, 0.1);
  --tsa-overlay-scrim: rgba(8, 12, 20, 0.6);

  --tsa-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --tsa-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --tsa-fs-eyebrow: 0.8125rem;
  --tsa-fs-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --tsa-fs-h2: clamp(1.6rem, 1.8vw + 1rem, 2.25rem);
  --tsa-ls-eyebrow: 0.1em;

  --tsa-space-1: 0.25rem;
  --tsa-space-2: 0.5rem;
  --tsa-space-3: 0.75rem;
  --tsa-space-4: 1rem;
  --tsa-space-5: 1.5rem;
  --tsa-space-6: 2rem;
  --tsa-space-8: 3rem;
  --tsa-space-10: 4rem;
  --tsa-space-12: 6rem;

  --tsa-container: 1240px;
  --tsa-radius-sm: 8px;
  --tsa-radius-md: 14px;
  --tsa-radius-lg: 20px;
  --tsa-radius-pill: 999px;

  --tsa-shadow-card: 0 14px 36px -18px var(--tsa-shadow-color);
  --tsa-transition: 180ms ease;
}

:root[data-theme="dark"] {
  --tsa-bg: #121418;
  --tsa-bg-alt: #181a1f;
  --tsa-surface: #1b1e24;
  --tsa-surface-raised: #20232a;
  --tsa-text: #f1f1ef;
  --tsa-text-muted: #a7aab1;
  --tsa-border: #2c2f37;
  --tsa-input-bg: #20232a;
  --tsa-input-border: #363a43;
  --tsa-shadow-color: rgba(0, 0, 0, 0.55);
  --tsa-overlay-scrim: rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background-color: var(--tsa-bg);
  color: var(--tsa-text);
  font-family: var(--tsa-font-body);
  font-size: 1rem;
  line-height: 1.65;
  transition: background-color var(--tsa-transition), color var(--tsa-transition);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--tsa-secondary, #f5a623); outline-offset: 2px; }