/* Design tokens — SPOKAR X
 * Sampled from spokar.com production CSS:
 *   --bs-product-color-1 #d3db41  (olive-green)
 *   --bs-product-color-2 #ae4353  (burgundy)
 *   --bs-product-color-3 #1e252b  (dark slate / body heading)
 *   --bs-primary         #124af0  (CTA blue)
 *   --bs-secondary       #f4f4f4  (light grey bg)
 *   --bs-base            #666     (body text)
 *   --bs-body-bg         #fff
 *   font-family          proxima-nova, sans-serif (Adobe Typekit, kit idi0ljb) */

:root {
  /* Brand */
  --olive: #d3db41;
  --olive-deep: #b8c133;
  --olive-soft: #f0f3c4;
  --burgundy: #ae4353;
  --burgundy-deep: #8a3441;
  --slate: #1e252b;
  --slate-soft: #2a323a;
  --primary: #124af0;
  --primary-deep: #0d3bc4;
  --primary-soft: #e6ecff;

  /* Neutrals */
  --white: #ffffff;
  --grey-50: #fafafa;
  --grey-75: #f7f7f7;
  --grey-100: #f4f4f4;
  --grey-200: #e5e5e5;
  --grey-300: #d4d4d3;
  --grey-500: #979797;
  --grey-600: #666666;
  --footer-line: #292929;

  /* Type */
  --font-primary: "proxima-nova", "Proxima Nova", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.25rem;
  --fs-h3: clamp(1.4rem, 1vw + 1rem, 1.75rem);
  --fs-h2: clamp(2rem, 2.5vw + 1rem, 3.25rem);
  --fs-display: clamp(3rem, 5vw + 1.25rem, 5.5rem);

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.18em;
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.6;

  /* Spatial */
  --container: 1240px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-py: clamp(4rem, 8vw, 7rem);
  /* Card / button radii unified at 3px per design spec */
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 3px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-base: 360ms;
  --t-slow: 700ms;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(30, 37, 43, 0.04), 0 4px 12px -4px rgba(30, 37, 43, 0.06);
  --shadow-2: 0 6px 16px -6px rgba(30, 37, 43, 0.12), 0 24px 48px -16px rgba(30, 37, 43, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}