/**
 * FreshFuel — Design Tokens
 *
 * Static fallback values. inc/customizer.php prints an inline <style> block
 * (freshfuel_customizer_css_vars) AFTER this file loads, overriding any of
 * these variables with the admin's live Customizer choices. Templates and
 * components should NEVER hardcode a color/size — always reference a token.
 */

:root {
  /* ---------- Brand colors (oat / harvest palette) ---------- */
  --color-primary: #1B2420;         /* ink — primary buttons, headings */
  --color-primary-hover: #0F1512;
  --color-secondary: #3F4A3B;       /* moss */
  --color-accent: #C89B3C;          /* toasted honey — sparing use */
  --color-accent-hover: #B08329;

  --color-background: #F3EFE4;      /* oat cream */
  --color-surface: #FFFFFF;
  --color-card-background: #FFFFFF;
  --color-header-background: #F3EFE4;
  --color-footer-background: #1B2420;

  --color-text: #1B2420;
  --color-text-secondary: #4A4F45;
  --color-text-muted: #7A7768;
  --color-heading: #1B2420;
  --color-link: #1B2420;
  --color-link-hover: #C89B3C;

  --color-border: #E2DCC9;
  --color-input-background: #FFFFFF;
  --color-input-border: #D8D2BE;

  --color-success: #3F6B4A;
  --color-warning: #C89B3C;
  --color-error: #8C3B2E;
  --color-info: #3F5A6B;
  --color-sale: #8C3B2E;
  --color-rating: #C89B3C;

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(2.75rem, 5vw, 5rem);
  --fs-h2: clamp(2rem, 3.4vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 2.2vw, 2rem);
  --fs-h4: 1.25rem;
  --fs-h5: 1.05rem;
  --fs-h6: 0.9rem;
  --fs-body: 1rem;
  --fs-nav: 0.95rem;
  --fs-button: 0.95rem;
  --fs-product-title: 1.1rem;
  --fs-product-price: 1.05rem;
  --fs-label: 0.8rem;
  --fs-caption: 0.8rem;

  --lh-heading: 1.1;
  --lh-body: 1.6;

  --ls-heading: -0.01em;
  --ls-label: 0.08em;

  /* ---------- Layout ---------- */
  --container-width: 1280px;
  --content-width: 760px;
  --wide-width: 1440px;
  --container-padding: 24px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 80px;

  --header-height: 84px;
  --header-height-scrolled: 64px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-button: 999px;
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-sm);
  --radius-image: var(--radius-lg);

  --shadow-sm: 0 1px 2px rgba(27, 36, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(27, 36, 32, 0.08);
  --shadow-lg: 0 20px 48px rgba(27, 36, 32, 0.12);

  --transition-fast: 150ms ease;
  --transition-normal: 280ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Breakpoints (referenced by JS via getComputedStyle) ---------- */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-large: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
  }
}