/* ==========================================================================
   Design tokens
   Single source of truth for colour, type, spacing, elevation and motion.
   Every other stylesheet should reference these variables — never hard-code
   a brand colour or shadow again.
   ========================================================================== */

:root {
  /* --- Brand palette --------------------------------------------------- */
  --c-sage:          #97A36A; /* primary brand green */
  --c-sage-deep:     #8C9A60;
  --c-sage-dark:     #7E8D54;
  --c-forest:        #2C3A22; /* dark sections + headings on light */
  --c-forest-light:  #3A4A2E;
  --c-ink:           #1B2413; /* near-black body text */
  --c-moss:          #4A5639; /* muted body text */
  --c-moss-light:    #6E7A5C; /* eyebrow / meta text */
  --c-leaf:          #6A984D; /* positive accents, avatars */

  --c-cream:         #F5F2EA; /* page background */
  --c-cream-card:    #FCFBF7; /* raised card surface */
  --c-sand:          #E8DECB; /* alternate section background */
  --c-border:        #DAD3C2; /* hairline borders on light */

  --c-coral:         #F4876B; /* primary accent / neon */
  --c-coral-bright:  #FF9A7A; /* accent hover */
  --c-coral-soft:    #FFB89E;
  --c-gold:          #E7A93C; /* review stars */
  --c-magenta:       #E8479B; /* secondary neon accent */

  /* --- Typography ------------------------------------------------------ */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* --- Radii ----------------------------------------------------------- */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* --- Elevation ------------------------------------------------------- */
  /* Two stacked layers (a tight contact shadow + a wider ambient one) read
     more natural and premium than a single hard drop. */
  --shadow-soft:       0 1px 2px rgba(27, 36, 19, 0.04),
                       0 4px 12px rgba(27, 36, 19, 0.05);
  --shadow-card:       0 2px 6px rgba(27, 36, 19, 0.05),
                       0 12px 28px rgba(27, 36, 19, 0.07);
  --shadow-card-hover: 0 6px 16px rgba(27, 36, 19, 0.07),
                       0 22px 42px rgba(27, 36, 19, 0.10);
  --shadow-lift:       0 10px 24px rgba(27, 36, 19, 0.10),
                       0 24px 48px rgba(27, 36, 19, 0.12);
  --shadow-float:      0 16px 40px rgba(27, 36, 19, 0.16),
                       0 32px 64px rgba(27, 36, 19, 0.18);

  /* Coral accent glow — a soft warm cast, dialled back from neon so the
     accent reads refined rather than electric. */
  --glow-coral:        0 8px 24px rgba(244, 135, 107, 0.32);
  --glow-coral-sm:     0 2px 10px rgba(244, 135, 107, 0.28);

  /* --- Layout ---------------------------------------------------------- */
  --container:      1200px;
  --container-text: 1100px;
  --gutter:         24px;
  --nav-height:     calc(74px + env(safe-area-inset-top, 0px)); /* floating nav (pill + top gap), plus the notch/status-bar inset on devices that have one */
  --nav-offset:     calc(82px + env(safe-area-inset-top, 0px)); /* nav height + breathing room, for sticky tops / scroll padding */

  /* --- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --t-fast:   0.25s;
  --t-base:   0.3s;
  --t-slow:   0.4s;
}

/* --- Breakpoints --------------------------------------------------------
   Media queries can't read custom properties, so these live as documented
   constants rather than tokens. Keep new media queries on these values:
     · 640px  — small / large-phone boundary (fine adjustments only)
     · 860px  — primary stack point: the nav switches to the hamburger and
                two-column page layouts collapse to a single column. Also the
                upper edge of "touch mode" (see below).
     · 1024px — desktop / large-tablet-landscape (full multi-column).

   Two interaction conditions drive the mobile rework — keep them distinct:
     Touch mode (no mouse-only flourishes, larger tap targets):
         @media (pointer: coarse), (max-width: 860px)
     Desktop-only flourishes (tilt, hover-lifts, reveals):
         @media (hover: hover) and (pointer: fine)
   ----------------------------------------------------------------------- */