/* ==========================================================================
   Design tokens
   Easings, durations and greyscale ramp are transcribed verbatim from the
   reference build (wolverineworldwide.com dist/main.css).
   ========================================================================== */

:root {
  /* --- Easing ----------------------------------------------------------- */
  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-power4-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);

  /* --- Duration --------------------------------------------------------- */
  --transition-duration-fastest: 0.1s;
  --transition-duration-faster: 0.15s;
  --transition-duration-fast: 0.2s;
  --transition-duration-slow: 0.6s;
  --transition-duration-slower: 0.8s;
  --transition-duration-slowest: 1s;

  /* --- Colour ----------------------------------------------------------- */
  --color-black: #010101;
  --color-white: #fff;
  --color-gray-200: #ccc;
  --color-gray-400: #9d9d9d;
  --color-gray-500: #737373;
  --color-gray-600: #757575;
  --color-gray-800: #4d4d4d;

  /* Warm accent — the one addition to the reference monochrome palette.
     Renovation work needs a point of warmth on calls to action. */
  --color-accent: #e8833a;
  --color-accent-dark: #c96a26;
  --color-sand: #f5f1ec;

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* --- Layout ----------------------------------------------------------- */
  --gutter: 12px;
  --page-x: 16px;
  --header-height: 68px;

  /* --- Type ------------------------------------------------------------- */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Animation defaults (consumed by animations.css) ------------------- */
  --anim-duration: var(--transition-duration-slower);
  --anim-delay: 0s;
  --anim-stagger: 0.1s;
}

@media (min-width: 768px) {
  :root {
    --gutter: 16px;
    --page-x: 40px;
    --header-height: 80px;
  }
}

/* The reference build zeroes every duration token under reduced motion
   rather than disabling transitions individually. Same approach here. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration-fastest: 0s !important;
    --transition-duration-faster: 0s !important;
    --transition-duration-fast: 0s !important;
    --transition-duration-slow: 0s !important;
    --transition-duration-slower: 0s !important;
    --transition-duration-slowest: 0s !important;
    --anim-duration: 0s !important;
    --anim-delay: 0s !important;
    --anim-stagger: 0s !important;
  }
}