/* Texas Healthy Foods design tokens.
   Structure (type, spacing, radius, layout, motion) is taken 1:1 from design/reference-design-tokens.md.
   Only color is new. Font: Manrope (Google Fonts, OFL). */

:root {
  /* Color — brand */
  --thf-live-oak: #2F4A3A;        /* brand: logo, display type, headings on photos, leaf */
  --thf-live-oak-tag: #3D5A48;    /* filled tag pill */
  --thf-ruby-red: #EF7339;        /* accent: primary buttons, icon tiles, dots, progress, slider */
  --thf-ruby-red-soft: rgba(239, 115, 57, 0.95); /* progress bar */
  --thf-on-accent: #2A1206;       /* text and glyphs on ruby red */

  /* Color — neutrals (warm, limestone) */
  --thf-text-primary: #1F1D1A;    /* mesquite */
  --thf-text-secondary: #5F5B55;
  --thf-text-body: #6F6A63;
  --thf-text-caption: #77726A;
  --thf-text-inverse: #FFFFFF;
  --thf-bg-page: #FFFFFF;
  --thf-bg-surface: #F8F5EF;      /* limestone */
  --thf-bg-tag-light: rgba(255, 255, 255, 0.95);
  --thf-border: #E6E0D6;
  --thf-divider: #ECE7DF;
  --thf-divider-on-dark: rgba(255, 255, 255, 0.3);
  --thf-glass-dark: rgba(0, 0, 0, 0.28);
  --thf-glass-light: rgba(255, 255, 255, 0.12);
  --thf-glass-light-border: rgba(255, 255, 255, 0.45);
  --thf-banner-gradient: linear-gradient(90deg, transparent 45%, rgba(20, 30, 24, 0.75) 100%);

  /* Typography */
  --thf-font: "Manrope", system-ui, sans-serif;
  --thf-display: 500 164px/1 var(--thf-font);
  --thf-footer-wordmark: 600 240px/0.9 var(--thf-font);
  --thf-h1: 500 44px/52px var(--thf-font);
  --thf-h2: 500 36px/44px var(--thf-font);
  --thf-stat: 600 36px/44px var(--thf-font);
  --thf-stat-lg: 500 44px/48px var(--thf-font);
  --thf-lead: 500 28px/41px var(--thf-font);
  --thf-h3: 500 26px/34px var(--thf-font);
  --thf-counter: 600 24px/32px var(--thf-font);
  --thf-h4: 500 20px/28px var(--thf-font);
  --thf-quote: 400 20px/29px var(--thf-font);
  --thf-title: 500 18px/24px var(--thf-font);
  --thf-title-sm: 600 16px/22px var(--thf-font);
  --thf-body: 400 14px/20px var(--thf-font);
  --thf-nav: 500 14px/20px var(--thf-font);
  --thf-button: 600 14px/20px var(--thf-font);
  --thf-caption: 400 13px/18px var(--thf-font);
  --thf-tag: 400 12px/16px var(--thf-font);
  --thf-tracking-display: -0.02em;
  --thf-tracking-heading: -0.01em;

  /* Layout */
  --thf-container: 1072px;
  --thf-container-inset: 992px;
  --thf-gutter: 24px;
  --thf-nav-height: 76px;

  /* Spacing (4 px base) */
  --thf-space-1: 4px;
  --thf-space-2: 8px;
  --thf-space-3: 10px;
  --thf-space-4: 12px;
  --thf-space-5: 16px;
  --thf-space-6: 20px;
  --thf-space-7: 24px;
  --thf-space-8: 32px;
  --thf-space-10: 40px;
  --thf-space-12: 48px;
  --thf-space-16: 64px;
  --thf-space-30: 120px;

  /* Radius */
  --thf-radius-xs: 4px;
  --thf-radius-sm: 6px;
  --thf-radius-md: 8px;
  --thf-radius-lg: 12px;
  --thf-radius-xl: 16px;
  --thf-radius-full: 9999px;

  /* Effects */
  --thf-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.06);
  --thf-glow: 0 0 0 6px rgba(239, 115, 57, 0.25), 0 0 18px 6px rgba(239, 115, 57, 0.35);
  --thf-blur-glass: 24px;

  /* Motion */
  --thf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --thf-reveal-duration: 600ms;
  --thf-reveal-distance: 24px;
  --thf-reveal-stagger: 80ms;
  --thf-hover-duration: 300ms;
  --thf-hover-lift: -8px;
}