/* ==========================================================================
   tokens.css · Osteria del Lago
   All CSS custom properties: colors, typography, spacing, motion.
   ========================================================================== */

:root {
  /* --- Color: neutral canvas --- */
  --color-canvas:      #F7F8F5;   /* primary background, warm off-white, slight green tint */
  --color-surface:     #FFFFFF;   /* secondary surface for inset panels */
  --color-ink:         #1A1A18;   /* primary text, near-black, warm tint */
  --color-ink-muted:   #6B6B66;   /* secondary text, metadata, labels */
  --color-border:      rgba(0, 0, 0, 0.08); /* structural 1px borders */

  /* --- Color: Italian flag greens --- */
  --color-forest:      #1D4A2F;   /* darkest green, primary CTA, hero accents */
  --color-green:       #2E6B46;   /* mid green, secondary CTAs, tags */
  --color-sage:        #4A8C62;   /* light green, hover states, muted accents */
  --color-green-tint:  #EDF5F0;   /* very light green tint for surface highlights */

  /* --- Color: Italian flag reds --- */
  --color-crimson:     #8B1E1E;   /* darkest red, prices, key highlights */
  --color-red:         #B83232;   /* mid red, secondary accents */
  --color-blush:       #F5ECEC;   /* very light red tint for surface highlights */

  /* --- Typography: families --- */
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* --- Typography: fluid scale --- */
  --t-hero:    clamp(3rem, 8vw, 7rem);
  --t-display: clamp(2.25rem, 5vw, 4.5rem);
  --t-h2:      clamp(1.75rem, 3.5vw, 3rem);
  --t-h3:      clamp(1.25rem, 2.5vw, 1.75rem);
  --t-large:   clamp(1.0625rem, 2vw, 1.1875rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;

  /* --- Typography: line height and tracking --- */
  --lh-tight:   1.1;
  --lh-display: 1.15;
  --lh-body:    1.65;
  --ls-tight:  -0.03em;
  --ls-label:   0.12em;

  /* --- Spacing --- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* --- Layout --- */
  --max-width: 1320px;
  --col-gap:   2rem;

  /* --- Motion --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   200ms;
  --dur-mid:    400ms;
  --dur-slow:   700ms;
  --dur-reveal: 600ms;
}

/* Reduced motion: collapse all durations and remove blur */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0.01ms;
    --dur-mid:    0.01ms;
    --dur-slow:   0.01ms;
    --dur-reveal: 0.01ms;
  }
}