:root {
  /* Brand Primary & Accents (Minimal Green Light Mode Theme)
   * Primary: #044b1a
   * Shades: #1d5d31, #366f48, #4f815f, #689376, #82a58d, #9bb7a3, #b4c9ba, #cddbd1, #e6ede8
   */
  --color-primary:        #044b1a;   /* Primary Green — minimal actions, active nav, primary buttons */
  --color-primary-dark:   #1d5d31;   /* Deep Dark Green — headings, product titles & dark accents */
  --color-primary-deep:   #1d5d31;   /* Deeper Green — hover states & dark accents */
  --color-primary-light:  #f0f4f1;   /* Very Subtle Light Neutral Tint — subtle badges */

  /* Accent Variations */
  --color-accent:         #366f48;   /* Medium Green Accent — secondary CTAs, badges */
  --color-accent-hover:   #1d5d31;   /* Darker Green hover */
  --color-accent-light:   #f5f7f6;   /* Clean Neutral Tint — soft card backgrounds */
  --color-accent-ultra:   #e2e8e4;   /* Pale Border & Fills */

  /* Additional Green Shade Scale Colors */
  --color-green-shade-4:  #4f815f;   /* Medium Green */
  --color-green-shade-5:  #689376;   /* Soft Muted Green */
  --color-green-shade-6:  #82a58d;   /* Light Muted Green */
  --color-green-shade-7:  #9bb7a3;   /* Light Sage Green */
  --color-green-shade-8:  #b4c9ba;   /* Pale Sage Green */
  --color-amber-mid:      #4f815f;   /* Mapped to Green Shade 4 */
  --color-amber-gold:     #689376;   /* Mapped to Green Shade 5 */

  /* Backgrounds (Always Pure Clean White) */
  --color-bg:             #FFFFFF;   /* Pure White — main content background */
  --color-bg-hero:        #FFFFFF;   /* Pure White — hero section */
  --color-surface:        #FFFFFF;   /* Pure White — card & section backgrounds */
  --color-surface-2:      #FAFAFA;   /* Neutral Off-White — clean alternate section background */

  /* Text (High Contrast Dark Text for Light Mode) */
  --color-text-primary:   #121714;   /* Deep Dark Charcoal — headings & title text */
  --color-text-secondary: #3f4742;   /* Neutral Dark Grey — body text, descriptions */
  --color-text-muted:     #68756d;   /* Muted Grey — captions, labels */
  --color-text-light:     #FFFFFF;   /* White — on solid green buttons/badges */

  /* Borders & Dividers */
  --color-border:         #e5e8e6;   /* Clean Neutral Border — cards, inputs */
  --color-border-dark:    #82a58d;   /* Medium Sage Border — focused states */
  --color-divider:        #f0f2f0;   /* Very light — section dividers */

  /* Status */
  --color-success:        #044b1a;   /* Deep Green — success */
  --color-error:          #D32F2F;   /* Red — errors */

  /* Decorative */
  --color-dot-grid:       #cddbd1;   /* Dot grid pattern color */
  --color-wave:           #f4f8f5;   /* Wave divider fill */

  /* Typography */
  --font-display: 'Onest', system-ui, -apple-system, sans-serif;
  --font-body:    'Onest', system-ui, -apple-system, sans-serif;

  /* Type Scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.75rem;    /* 44px */
  --text-hero:  3.75rem;    /* 60px */
  --text-giant: 5rem;       /* 80px */

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.65;
  --leading-loose:  1.85;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.12em;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  --section-padding: var(--space-24);
  --section-padding-sm: var(--space-16);
  --section-padding-lg: var(--space-32);
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-px: var(--space-8);
  --container-sm: var(--space-4);
  --grid-gap: var(--space-8);

  /* Border Radius */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:         0 1px 2px rgba(26, 29, 26, 0.04);
  --shadow-sm:         0 2px 8px rgba(26, 29, 26, 0.06);
  --shadow-md:         0 4px 20px rgba(26, 29, 26, 0.08);
  --shadow-lg:         0 8px 40px rgba(26, 29, 26, 0.10);
  --shadow-xl:         0 16px 60px rgba(26, 29, 26, 0.12);
  --shadow-card:       0 2px 12px rgba(4, 75, 26, 0.06);
  --shadow-card-hover: 0 8px 36px rgba(4, 75, 26, 0.12);
  --shadow-teal:       0 4px 20px rgba(4, 75, 26, 0.15);

  /* Transitions & Animations */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}