/* ==========================================================================
   THE DAILY FUEL — Design Tokens
   Source of truth: The Daily Fuel Brand Guidelines.
   Three-color system: Deep Green leads, Off-White breathes, Charcoal informs.
   Natural ingredient colour appears only through photography — never as UI chrome.
   ========================================================================== */

:root {
  /* ---- Core brand colours (non-negotiable) ---------------------------- */
  --green:        #1E4D2B;   /* Deep Green — logo, headings, buttons, key surfaces */
  --off-white:    #FAF9F6;   /* Off-White — primary background, packaging base */
  --charcoal:     #1C1C1C;   /* Charcoal — body copy, functional information */

  /* ---- Deep Green ramp (derived for depth / states only) -------------- */
  --green-900:    #133420;
  --green-800:    #173E25;
  --green-700:    #1E4D2B;   /* = brand green */
  --green-600:    #2A6238;
  --green-500:    #357A46;
  --green-300:    #8FB79C;
  --green-100:    #E3EEE6;   /* light green tint — quiet section fills */
  --green-50:     #EFF4F0;

  /* ---- Off-white / warm neutral ramp ---------------------------------- */
  --cream:        #FAF9F6;   /* = off-white */
  --cream-2:      #F3F1EA;   /* alternating section background */
  --cream-3:      #EBE8DE;   /* deeper warm panel */
  --line:         #E7E3D8;   /* hairline borders on light */
  --line-strong:  #D8D3C5;

  /* ---- Ink ramp (text) ------------------------------------------------ */
  --ink:          #1C1C1C;   /* = charcoal, primary text */
  --ink-2:        #4F4E48;   /* secondary text (≥7:1 on off-white) */
  --ink-3:        #63615A;   /* tertiary / helper text (≥5.3:1 on off-white) */
  --on-green:     #FAF9F6;   /* text/icons on Deep Green */
  --on-green-2:   #C9D8CE;   /* muted text on Deep Green */

  /* ---- Functional UI states (NOT brand colours — feedback only) ------- */
  --success:      #2E7D43;
  --success-bg:   #E6F1E9;
  --error:        #C0392B;
  --error-bg:     #FBEAE7;
  --warning:      #B7791F;
  --warning-bg:   #FBF1DE;
  --info:         #2C6E8F;
  --info-bg:      #E6F0F4;

  /* ---- Restrained food accents (tags/dots only, echo photography) ----- */
  --food-tomato:  #C44536;
  --food-carrot:  #DD8A2B;
  --food-berry:   #8E3B5E;
  --food-avocado: #6B8E3D;

  /* ---- Semantic aliases ---------------------------------------------- */
  --bg:           var(--off-white);
  --bg-alt:       var(--cream-2);
  --surface:      #FFFFFF;
  --surface-2:    var(--cream-2);
  --band:         var(--green);          /* dark-green info/benefit bands */
  --text:         var(--ink);
  --text-muted:   var(--ink-2);
  --text-subtle:  var(--ink-3);
  --primary:      var(--green);
  --primary-hover:var(--green-800);
  --border:       var(--line);
  --ring:         var(--green-500);

  /* ---- Typography ----------------------------------------------------- */
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium:  600;   /* nav, buttons, labels, product names, tabs */
  --fw-bold:    700;   /* sub-headings */
  --fw-x:       800;   /* headlines, key brand statements */

  /* Fluid type scale */
  --fs-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem); /* hero */
  --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-h4:      1.175rem;
  --fs-lead:    clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;      /* 16px base */
  --fs-sm:      0.9375rem; /* 15px */
  --fs-xs:      0.8125rem; /* 13px */
  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-body:    1.62;

  /* ---- Spacing scale (4 / 8 rhythm) ---------------------------------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6rem;   --s-12: 8rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* ---- Radii (medium, clean — no excessive pills) -------------------- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --r-2xl: 30px; --r-pill: 999px;

  /* ---- Elevation (subtle, used sparingly) ---------------------------- */
  --shadow-xs: 0 1px 2px rgba(28,28,28,.05);
  --shadow-sm: 0 2px 8px rgba(28,28,28,.06);
  --shadow-md: 0 8px 24px rgba(28,28,28,.08);
  --shadow-lg: 0 18px 50px rgba(19,52,32,.16);
  --shadow-green: 0 10px 28px rgba(30,77,43,.18);

  /* ---- Layout --------------------------------------------------------- */
  --container: 1208px;
  --container-narrow: 920px;
  --container-wide: 1360px;
  --gutter: clamp(1.125rem, 0.6rem + 2vw, 2.5rem);
  --header-h: 76px;
  --announce-h: 40px;

  /* ---- Motion --------------------------------------------------------- */
  --t-fast: 130ms;
  --t: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- Z-index scale -------------------------------------------------- */
  --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 400;
  --z-overlay: 500; --z-modal: 600; --z-toast: 800; --z-skip: 900;
}

@media (max-width: 720px){
  :root{ --header-h: 64px; }
}