/* PATH: public_html/assets/css/tokens/colors.css */
/* Values unchanged from the original style.css :root — every existing
   file (product.css, admin.css, checkout.css, slider.css) references
   these variable names directly, so nothing downstream breaks by
   splitting this out. */
:root {
  --black:        #0a0a0a;
  --black-soft:   #111111;
  --black-card:   #161616;
  --black-border: #222222;
  --brown:        #6B3A2A;
  --brown-light:  #8B4A35;
  --brown-pale:   #D4A882;
  --white:        #F5F0EB;
  --white-dim:    #C8BFB5;
  --white-faint:  rgba(245,240,235,0.06);
  --ruby:         #9B1B30;
  --ruby-bright:  #C0213A;
  --ruby-glow:    rgba(155,27,48,0.18);
  --gold:         #C9972C;
  --gold-bright:  #E8B84B;
  --gold-pale:    #F5D98A;
  --gold-glow:    rgba(201,151,44,0.15);
  --green-africa: #2D6A2D;

  --glass-dark:   rgba(8,6,5,0.72);
  --glass-light:  rgba(250,250,248,0.88);
  --glass-blur:   blur(28px) saturate(160%);

  /* ── METALLIC ICON SYSTEM ──
     Thin brushed-metal ring used to frame every icon/glyph so icons read
     as app affordances rather than flat emoji sitting on a flat panel. */
  --metal-gold: linear-gradient(145deg, #6b4f1e 0%, #C9972C 22%, #F5D98A 45%, #E8B84B 58%, #8a651f 78%, #C9972C 100%);
  --metal-ruby: linear-gradient(145deg, #4a0e18 0%, #9B1B30 22%, #E8556F 45%, #C0213A 58%, #5c1420 78%, #9B1B30 100%);
  --metal-silver: linear-gradient(145deg, #6b6b6b 0%, #d8d8d8 22%, #ffffff 45%, #c4c4c4 58%, #5a5a5a 78%, #a8a8a8 100%);
  --metal-sheen: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0) 62%);
  --icon-ring-w: 1.5px;
}