/* FAZZI design tokens.
 *
 * Declared on :root, not on a wrapper class. The reference project scoped its
 * variables to .agt2-wrap, which meant anything rendered outside that element
 * — error pages, the bootstrap pages, print styles — silently lost every
 * colour. Values here mirror tailwind.config.js exactly.
 */

:root {
  /* Greens: the brand's ground. Forest for dark surfaces, sage for accents. */
  --fz-forest: #1b3a2e;
  --fz-forest-mid: #244535;
  --fz-forest-light: #2d5a42;
  --fz-sage: #4a9464;
  --fz-sage-light: #7ab893;
  --fz-sage-pale: #d4ead9;

  /* Gold: used sparingly, for emphasis and primary actions only. */
  --fz-gold: #c9a227;
  --fz-gold-light: #e8cc82;
  --fz-gold-pale: #f5ecd4;

  /* Neutrals. */
  --fz-cream: #f9f7f2;
  --fz-paper: #f2ece0;
  --fz-white: #ffffff;
  --fz-ink: #1a2e22;
  --fz-ink-light: #3d5445;
  --fz-ink-muted: #586f61;
  --fz-line: rgba(26, 46, 34, 0.12);

  /* Feedback. Separate hues so an error can never render as a success. */
  --fz-success: #2f7d4f;
  --fz-success-bg: #e8f4ec;
  --fz-error: #a4342a;
  --fz-error-bg: #fbeceb;
  --fz-info: #2b5f7d;
  --fz-info-bg: #e9f2f7;
  --fz-warning: #8a6412;
  --fz-warning-bg: #fdf4e0;

  /* Typography. */
  --fz-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fz-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Rhythm and shape. */
  --fz-radius: 10px;
  --fz-radius-sm: 6px;
  --fz-radius-pill: 999px;
  --fz-content-width: 1180px;
  --fz-gutter: clamp(1.25rem, 4vw, 2rem);
  --fz-section-y: clamp(3rem, 6vw, 5rem);

  --fz-shadow-card: 0 1px 2px rgba(26, 46, 34, 0.04), 0 8px 24px rgba(26, 46, 34, 0.06);
  --fz-shadow-lift: 0 12px 32px rgba(27, 58, 46, 0.14);

  --fz-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fz-transition: 220ms var(--fz-ease);
}

@media (min-width: 768px) {
  :root {
    --fz-gutter: 2rem;
  }
}

/* Context doc §18: respect a reduced-motion preference for anything
 * non-essential. Applied globally so no component has to remember. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fz-transition: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
