/**
 * Design tokens for the Marketing Agency theme.
 *
 * Brand colors (--mkt-primary, --mkt-secondary, and every derived
 * hover/dark/tint/on-color shade) 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: mkt_print_color_vars()). That keeps a single
 * source of truth: change a color in Theme Options → Colors and every
 * shade everywhere updates, in both Light and Dark mode, with nothing
 * to keep in sync by hand.
 *
 * This file only defines the neutral surface/text/border tokens that
 * change between Light and Dark mode — everything not brand-colored.
 */

:root {
  --mkt-bg: #ffffff;
  --mkt-bg-alt: #f6f8f7;
  --mkt-surface: #ffffff;
  --mkt-surface-raised: #ffffff;
  --mkt-text: #131614;
  --mkt-text-muted: #5b6560;
  --mkt-border: #e6eae8;
  --mkt-header-bg: #ffffff;
  --mkt-input-bg: #ffffff;
  --mkt-input-border: #d8dedb;
  --mkt-shadow-color: rgba(15, 30, 24, 0.1);
  --mkt-footer-bg: #14201b;
  --mkt-footer-text: #f2f5f3;
  --mkt-footer-text-muted: rgba(242, 245, 243, 0.65);
  --mkt-overlay-scrim: rgba(10, 18, 15, 0.55);

  --mkt-font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
  --mkt-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --mkt-fs-eyebrow: 0.8125rem;
  --mkt-fs-h1: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  --mkt-fs-h2: clamp(1.65rem, 2vw + 1rem, 2.25rem);
  --mkt-ls-eyebrow: 0.08em;

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

  --mkt-container: 1280px;
  --mkt-radius-sm: 8px;
  --mkt-radius-md: 14px;
  --mkt-radius-lg: 22px;
  --mkt-radius-pill: 999px;

  --mkt-shadow-card: 0 16px 40px -18px var(--mkt-shadow-color);
  --mkt-transition: 180ms ease;
}

:root[data-theme="dark"] {
  --mkt-bg: #0d1512;
  --mkt-bg-alt: #121b17;
  --mkt-surface: #16211c;
  --mkt-surface-raised: #1b2822;
  --mkt-text: #eef2f0;
  --mkt-text-muted: #a3afa9;
  --mkt-border: #263129;
  --mkt-header-bg: #0d1512;
  --mkt-input-bg: #1b2822;
  --mkt-input-border: #33403a;
  --mkt-shadow-color: rgba(0, 0, 0, 0.55);
  --mkt-footer-bg: #08100c;
  --mkt-footer-text: #eef2f0;
  --mkt-footer-text-muted: rgba(238, 242, 240, 0.6);
  --mkt-overlay-scrim: rgba(0, 0, 0, 0.65);
}

@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(--mkt-bg);
  color: var(--mkt-text);
  font-family: var(--mkt-font-body);
  font-size: 1rem;
  line-height: 1.65;
  transition: background-color var(--mkt-transition), color var(--mkt-transition);
}

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