/* ============================================================
   Wooden Horse Strategies — token layer
   Colour, type family, spacing and radius values are lifted
   verbatim from the Classical design system (design-system/
   styles.css in the handoff). Do not retune here casually.

   Added for production: fluid type scale, gutters, measure.
   ============================================================ */

:root {
  /* --- Classical: roles --- */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);
  --color-dark: #1b1a19;

  /* --- Classical: neutral ramp --- */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* --- Classical: accent ramp --- */
  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  /* --- Classical: type families --- */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;

  /* --- Classical: radius --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* --- Classical: elevation --- */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* ==========================================================
     PRODUCTION ADDITIONS — the responsive layer.
     Fluid ramps run 375px -> 1200px, then clamp at both ends.
     ========================================================== */

  /* Type scale. Max values are the desktop sizes specified in
     the handoff; min values come from the 390px mobile comps. */
  --fs-hero:     clamp(2.375rem, 1.58rem + 3.39vw, 4.125rem);  /* 38 -> 66 */
  --fs-h1:       clamp(2.125rem, 1.44rem + 2.91vw, 3.625rem);  /* 34 -> 58 */
  --fs-h2:       clamp(1.6875rem, 1.375rem + 1.33vw, 2.375rem);/* 27 -> 38 */
  --fs-h3:       clamp(1.375rem, 1.03rem + 1.45vw, 2.125rem);  /* 22 -> 34 */
  --fs-display:  clamp(1.25rem, 0.98rem + 1.15vw, 1.6875rem);  /* 20 -> 27 */
  --fs-title:    clamp(1.3125rem, 1.17rem + 0.61vw, 1.625rem); /* 21 -> 26 */
  --fs-item:     clamp(1.125rem, 1.06rem + 0.27vw, 1.3125rem); /* 18 -> 21 */
  --fs-lead:     clamp(0.9375rem, 0.88rem + 0.24vw, 1.0625rem);/* 15 -> 17 */
  --fs-body:     clamp(0.96875rem, 0.95rem + 0.06vw, 1rem);    /* 15.5 -> 16 */
  --fs-meta:     0.71875rem;   /* 11.5 */
  --fs-kicker:   0.75rem;      /* 12 */

  /* Page frame */
  --maxw: 1200px;
  --gutter: 20px;
  --section-y: 40px;

  /* Vertical rhythm between grid tracks */
  --gap: 28px;

  /* Header height — drives sticky offsets and scroll-margin */
  --header-h: 62px;
}

/* Tablet */
@media (min-width: 700px) {
  :root {
    --gutter: 32px;
    --section-y: 52px;
    --gap: 36px;
    --header-h: 70px;
  }
}

/* Desktop */
@media (min-width: 1100px) {
  :root {
    --gutter: 40px;
    --section-y: 66px;
    --gap: 52px;
    --header-h: 76px;
  }
}

/* Respect reduced-motion globally */
@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;
  }
}