/* ==========================================================================
   Design tokens
   Easings and durations carry over from the Craftline build. The palette and
   type are Cattytude's own: brand orange on warm cream, purple as the play
   colour, and a rounded display face so the whole thing reads friendly
   rather than corporate.
   ========================================================================== */

: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);
  /* The one addition — an overshoot curve. Every "pop" on this site uses it. */
  --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 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 -----------------------------------------------------------
     Sampled from cattytude.com: #EC6726 is the brand orange, #FAF6F0 the
     page cream. Ink is warmed off pure black so it sits with them. */
  --color-ink: #1e1418;
  --color-ink-soft: #3a2c31;
  --color-white: #fff;
  --color-cream: #fdf7f0;
  --color-cream-deep: #f6e9dc;
  --color-blush: #fbe3d9;

  --color-orange: #ec6726;
  --color-orange-dark: #c9501a;
  --color-orange-soft: #ff8044;

  --color-purple: #8b2df5;
  --color-purple-dark: #5000aa;
  --color-purple-soft: #be89f9;

  --color-gold: #d9a441;
  --color-forest: #2f5c41;

  --color-gray-200: #ddd2c8;
  --color-gray-400: #a89a90;
  --color-gray-500: #7d6f68;
  --color-gray-600: #6b5f59;
  --color-gray-800: #453b38;

  /* Aliases so component rules read the same as the reference build. */
  --color-black: var(--color-ink);
  --color-accent: var(--color-orange);
  --color-accent-dark: var(--color-orange-dark);
  --color-sand: var(--color-cream-deep);

  /* --- Radii -------------------------------------------------------------
     Rounder across the board than the reference. This is the single biggest
     lever on "fun vs. corporate", so it gets pushed hard. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-full: 999px;

  /* --- Layout ----------------------------------------------------------- */
  --gutter: 12px;
  --page-x: 16px;
  --header-height: 68px;
  /* The pledge bar wraps to two lines on narrow screens. */
  --announce-height: 48px;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Fredoka", "Inter Tight", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-mono: "Space 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;
    --announce-height: 30px;
  }
}

/* Durations are zeroed wholesale under reduced motion rather than disabling
   each transition individually — same approach as the reference build. */
@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;
  }
}