/*
Theme Name: Lean & Green Recipes
Theme URI: https://optavialeanandgreen.com
Author: Optavia Lean and Green Recipes
Author URI: https://optavialeanandgreen.com
Description: A recipe-magazine theme built for OPTAVIA Lean & Green content — featured recipe hero, category grids, a color-coded Counts system for plan tracking, printable recipe cards with structured Recipe schema for SEO, and a clean, food-forward editorial layout.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: leangreen
Tags: blog, food-and-drink, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments, widgets, block-styles
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* base surfaces */
  --oat:            #F8F5EE;
  --oat-deep:       #EFE9DC;
  --paper:          #FFFFFF;
  --ink:            #22302A;
  --ink-soft:       #4C5C54;
  --line:           #E1DACB;

  /* brand */
  --sage:           #4F7360;
  --sage-deep:      #2E4A3A;
  --sage-pale:      #DCE7DE;

  /* counts system — each plan component gets its own identity */
  --c-lean:         #2E4A3A;   /* Lean protein   – deep forest  */
  --c-green:        #6E9A57;   /* Green veg      – leaf green   */
  --c-healthyfat:   #C9971F;   /* Healthy Fat    – amber/gold   */
  --c-condiment:    #B0562F;   /* Condiment      – spice clay   */
  --c-fueling:      #8C3A5D;   /* Fueling        – berry        */

  /* display type */
  --font-display:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;

  --radius-s:  6px;
  --radius-m:  14px;
  --radius-l:  28px;
  --shadow-card: 0 1px 2px rgba(34,48,42,0.06), 0 8px 24px -12px rgba(34,48,42,0.18);
  --shadow-pop:  0 20px 45px -20px rgba(34,48,42,0.35);
  --container: 1240px;
}

@media (prefers-color-scheme: dark){
  body.leangreen-auto-dark{
    --oat: #1B211D; --oat-deep:#141814; --paper:#212820; --ink:#EFEDE4; --ink-soft:#B8C1BA; --line:#33403A;
  }
}
body.dark-mode{
  --oat: #1B211D; --oat-deep:#141814; --paper:#212820; --ink:#EFEDE4; --ink-soft:#B8C1BA; --line:#33403A;
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--oat); color:var(--ink);
  font-family:var(--font-body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:600; }
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.visually-hidden{ position:absolute !important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
:focus-visible{ outline:3px solid var(--c-green); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* assets/css/theme.css is enqueued separately in functions.php — see leangreen_scripts() */