/*
 * variables.css — CSS Custom Properties
 * Bridges theme.json tokens to usable variables.
 * RULE: Never hardcode colours, fonts, or radii in component CSS.
 */
:root {
  --sm-green:         var(--wp--preset--color--primary);
  --sm-green-dark:    var(--wp--preset--color--primary-dark);
  --sm-green-darker:  var(--wp--preset--color--primary-darker);
  --sm-forest:        var(--wp--preset--color--forest);
  --sm-mint:          var(--wp--preset--color--mint);
  --sm-mint-tint:     var(--wp--preset--color--mint-tint);
  --sm-ink:           var(--wp--preset--color--ink);
  --sm-ink-2:         var(--wp--preset--color--ink-2);
  --sm-ink-3:         var(--wp--preset--color--ink-3);
  --sm-ink-4:         var(--wp--preset--color--ink-4);
  --sm-paper:         var(--wp--preset--color--paper);
  --sm-paper-2:       var(--wp--preset--color--paper-2);
  --sm-paper-3:       var(--wp--preset--color--paper-3);
  --sm-amber:         var(--wp--preset--color--amber);
  --sm-amber-light:   var(--wp--preset--color--amber-light);
  --sm-blue-light:    var(--wp--preset--color--blue-light);
  --sm-red:           var(--wp--preset--color--red);
  --sm-red-light:     var(--wp--preset--color--red-light);
  --sm-border:        rgba(0,0,0,.08);
  --sm-border-strong: rgba(0,0,0,.14);
  --sm-green-dim:     rgba(29,158,117,.12);
  --sm-green-dim-25:  rgba(29,158,117,.25);
  /* Fluid spacing scale (mobile → desktop) */
  --sm-space-2:  clamp(0.25rem, 0.5vw, 0.5rem);
  --sm-space-4:  clamp(0.5rem,  1vw,   1rem);
  --sm-space-6:  clamp(0.75rem, 1.5vw, 1.5rem);
  --sm-space-8:  clamp(1rem,    2vw,   2rem);
  --sm-space-12: clamp(1.5rem,  3vw,   3rem);
  --sm-space-16: clamp(2rem,    4vw,   4rem);
  --sm-space-20: clamp(2.5rem,  5vw,   5rem);
  --sm-space-24: clamp(3rem,    6vw,   6rem);
  /* Fluid gaps for grids/flex */
  --sm-gap-xs:   clamp(.375rem, .5vw, .5rem);
  --sm-gap-sm:   clamp(.5rem,   1vw,  .75rem);
  --sm-gap:      clamp(.75rem,  1.5vw, 1rem);
  --sm-gap-lg:   clamp(1rem,    2vw,  1.5rem);
  --sm-gap-xl:   clamp(1.5rem,  3vw,  2rem);
  /* Standardized breakpoints (device-aligned) */
  --sm-bp-sm: 640px;
  --sm-bp-md: 768px;
  --sm-bp-lg: 1024px;
  --sm-bp-xl: 1280px;
  --sm-font-display:  var(--wp--preset--font-family--display);
  --sm-font-body:     var(--wp--preset--font-family--body);
  --sm-size-xs:   var(--wp--preset--font-size--xs);
  --sm-size-sm:   var(--wp--preset--font-size--sm);
  --sm-size-base: var(--wp--preset--font-size--base);
  --sm-size-md:   var(--wp--preset--font-size--md);
  --sm-size-lg:   var(--wp--preset--font-size--lg);
  --sm-size-xl:   var(--wp--preset--font-size--xl);
  --sm-size-hero: var(--wp--preset--font-size--hero);
  --sm-size-h1:   var(--wp--preset--font-size--h1);
  --sm-size-h2:   var(--wp--preset--font-size--h2);
  --sm-size-h3:   var(--wp--preset--font-size--h3);
  --sm-r-sm:   6px;   --sm-r:   10px;
  --sm-r-lg:   16px;  --sm-r-xl: 24px;  --sm-r-full: 9999px;
  --sm-shadow-sm:    0 1px 3px rgba(0,0,0,.06);
  --sm-shadow-md:    0 4px 16px rgba(0,0,0,.08);
  --sm-shadow-lg:    0 8px 32px rgba(0,0,0,.12);
  --sm-shadow-green: 0 0 0 3px rgba(29,158,117,.12);
  --sm-nav-height:      72px;
  --sm-max-width:       1200px;
  --sm-container-pad:   clamp(1rem, 3vw, 2rem);
  --sm-section-pad:     clamp(2.5rem, 5vw, 5rem);
  --sm-section-pad-sm:  clamp(1.5rem, 3vw, 3rem);
  --sm-transition:      0.15s ease;
  --sm-transition-md:   0.2s ease;
  --sm-z-sticky: 90;  --sm-z-nav: 100;
  --sm-z-popup: 200;  --sm-z-toast: 9999;
  --sm-star:         #F59E0B;
  --sm-blue-dark:    #0C447C;
  --sm-red-light-bd: #fecaca;
}