/* ==========================================================================
   Texas RV Center — design tokens
   Generated from docs/04-design-system.json (Phase 2).

   Contrast for every enforced pair is verified in docs/04-contrast-report.json.
   Regenerate with: node scripts/check-contrast.mjs
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --color-navy: #002652;
  --color-navy-dark: #001b3b;
  --color-red: #a31e21;
  --color-red-dark: #7f1719;

  /* --- Neutrals --------------------------------------------------------- */
  --color-white: #ffffff;
  --color-surface: #efefef;
  --color-ink: #3c3334;          /* warm near-black, not #000 */
  --color-ink-muted: #686565;

  /* Two border tokens on purpose. --color-border is decorative and exempt
     from WCAG 1.4.11 at 1.43:1. --color-border-control marks boundaries a
     user must perceive to operate a control: 3.64:1 on white. Do not
     substitute one for the other. */
  --color-border: #d8d8d8;
  --color-border-control: #868686;

  /* --- Semantic --------------------------------------------------------- */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-text-inverse: var(--color-white);
  --color-link: var(--color-red);
  --color-link-hover: var(--color-red-dark);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-surface);
  --color-focus: var(--color-navy);

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;

  --text-display: clamp(2.75rem, 6vw, 4rem);
  --text-h1: clamp(2rem, 4vw, 3rem);
  --text-h2: clamp(1.75rem, 3vw, 2.25rem);
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body-lg: 1.1875rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.8125rem;

  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-snug: 1.25;
  --leading-body: 1.65;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-eyebrow: 0.08em;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --measure: 68ch;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Section rhythm varies by content weight — deliberately not uniform. */
  --section-tight: var(--space-7);
  --section-default: var(--space-8);
  --section-loose: 112px;

  /* --- Geometry --------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --border-hairline: 1px;
  --border-emphasis: 2px;
  --border-rule: 3px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 20px;

  --control-height: 48px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 48px;
  --icon-feature: 56px;

  /* --- Depth ------------------------------------------------------------ */
  --shadow-card: 0 1px 2px rgba(0, 38, 82, 0.06), 0 2px 8px rgba(0, 38, 82, 0.06);
  --shadow-raised: 0 2px 4px rgba(0, 38, 82, 0.08), 0 8px 24px rgba(0, 38, 82, 0.1);
  --scrim: linear-gradient(180deg, rgba(0, 38, 82, 0) 40%, rgba(0, 38, 82, 0.55) 100%);

  /* --- Motion ----------------------------------------------------------- */
  /* Duration matched to distance travelled, not applied uniformly. */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
  }
}

/* Focus is never removed — only restyled. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--border-emphasis) solid var(--color-focus);
  outline-offset: 2px;
}

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