/* ============================================================
   AYURVIKA — COLOR SYSTEM
   Anchored on the logo's bright fresh-leaf green (#7ED957), with a
   saturated green ramp (never muted/forest) and a warm gold/amber
   luxury accent. Warm ivory canvas keeps the huge product range airy.
   ============================================================ */
:root {
  /* ---- Green ramp (saturated, leaf-fresh, hue ~110-145) ---- */
  --green-50:  #F1FBEA;
  --green-100: #DEF6CC;
  --green-200: #BFEC9C;
  --green-300: #9EE173;   /* light fresh */
  --green-400: #7ED957;   /* ★ LOGO GREEN — brand signature */
  --green-500: #54C13E;   /* juicy mid */
  --green-600: #2FA53C;   /* vivid primary */
  --green-700: #1C8038;   /* deep, AA on white */
  --green-800: #145E33;   /* emerald surface */
  --green-900: #0C3D24;   /* forest — dark sections */
  --green-950: #07291A;   /* deepest ink-green */

  /* ---- Gold / amber luxury accent ---- */
  --gold-100: #FAF1D7;
  --gold-200: #F1DDA1;
  --gold-300: #E6C56A;
  --gold-400: #D6A93F;   /* ★ signature gold */
  --gold-500: #C0902A;   /* rich gold (text-safe on light) */
  --gold-600: #9C711C;
  --gold-700: #735114;

  /* ---- Warm neutrals (ivory canvas, green-tinted ink) ---- */
  --white:      #FFFFFF;
  --ivory:      #FBF8F0;   /* primary page canvas — warm cream */
  --ivory-deep: #F4EDDC;   /* alt band / soft tint */
  --sand:       #EFE7D3;   /* warmest neutral surface */
  --line:       #E7E2D2;   /* hairline borders */
  --line-strong:#D8D1BC;
  --ink:        #12251A;   /* near-black warm green — primary text */
  --ink-soft:   #2C3D32;
  --body:       #4C5A50;   /* secondary body text */
  --mute:       #8A958B;   /* captions / placeholder */

  /* ---- Semantic status ---- */
  --positive:   #1C8038;
  --positive-bg:#E4F5DA;
  --warning:    #C0902A;
  --warning-bg: #FAF1D7;
  --negative:   #C0392B;
  --negative-bg:#FBE7E4;

  /* ---- Translucent overlays / glass ---- */
  --glass-light: rgba(255,255,255,0.72);
  --glass-dark:  rgba(7,41,26,0.55);
  --scrim:       rgba(7,41,26,0.45);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --brand:            var(--green-400);  /* the logo green, for accents/marks */
  --brand-vivid:      var(--green-600);
  --brand-primary:    var(--green-700);  /* primary actions, text-safe */
  --brand-deep:       var(--green-900);  /* dark surfaces */
  --accent:           var(--gold-400);   /* premium gold accent */
  --accent-strong:    var(--gold-500);

  --surface-page:     var(--ivory);
  --surface-alt:      var(--ivory-deep);
  --surface-card:     var(--white);
  --surface-sand:     var(--sand);
  --surface-dark:     var(--green-900);
  --surface-darker:   var(--green-950);

  --text-strong:      var(--ink);
  --text-body:        var(--body);
  --text-mute:        var(--mute);
  --text-on-dark:     #EAF3E8;
  --text-on-dark-mute:#9FB6A6;
  --text-on-brand:    #FFFFFF;
  --text-on-accent:   #2A1E04;

  --border:           var(--line);
  --border-strong:    var(--line-strong);
  --focus-ring:       var(--green-600);
}