/* ============================================================
   PharmaZen — Color tokens
   A calm, clinical blue palette grounded in deep navy, with
   warm product-line accents (ginseng / moringa / magnesium).
   ============================================================ */
:root {
  /* ---- Brand blues (base scale) ---- */
  --pz-navy-900: #102a45;   /* deepest — primary headings on light */
  --pz-navy-800: #15314f;   /* dark navy surfaces */
  --pz-blue-700: #284b73;   /* deep editorial blue (hero / footers) */
  --pz-blue-600: #2e6da4;   /* PRIMARY brand blue */
  --pz-blue-500: #3f86c4;   /* hover / lighter primary */
  --pz-blue-300: #6aa9da;   /* sky accent — italic accents, links */
  --pz-blue-200: #a9cbe6;   /* soft accent */
  --pz-blue-100: #d6e3ef;   /* tint fills */

  /* ---- Mist neutrals (cool gray-blue) ---- */
  --pz-mist-100: #eef2f6;   /* primary page surface */
  --pz-mist-50:  #f6f8fa;   /* lightest surface */
  --pz-white:    #ffffff;

  /* ---- Ink neutrals (slightly blue-cast grays) ---- */
  --pz-ink:       #1c2733;  /* body text, near-black */
  --pz-slate-600: #4a5a6a;  /* secondary text */
  --pz-slate-400: #8a98a6;  /* muted text / captions */
  --pz-line:      #dde4ea;  /* hairline borders */
  --pz-line-strong: #c4d0db;

  /* ---- Product-line accents ---- */
  --pz-ginseng:   #e87a22;  /* Korean Panax Ginseng — energy/focus */
  --pz-moringa:   #2f9e5b;  /* Moringa Leaf — natural energy */
  --pz-magnesium: #2e6da4;  /* Magnesium Glycinate — sleep/calm */

  /* ---- Semantic status ---- */
  --pz-success: #2f9e5b;
  --pz-warning: #e8a022;
  --pz-error:   #d24b3e;
  --pz-info:    #2e6da4;

  /* ============================================================
     Semantic aliases — reference THESE in components.
     ============================================================ */
  --color-bg:            var(--pz-mist-100);
  --color-surface:       var(--pz-white);
  --color-surface-tint:  var(--pz-mist-50);
  --color-surface-inverse: var(--pz-navy-800);
  --color-surface-brand: var(--pz-blue-700);

  --text-strong:   var(--pz-navy-900);
  --text-body:     var(--pz-ink);
  --text-muted:    var(--pz-slate-600);
  --text-subtle:   var(--pz-slate-400);
  --text-on-dark:  var(--pz-white);
  --text-on-dark-muted: rgba(255,255,255,0.72);

  --color-primary:        var(--pz-blue-600);
  --color-primary-hover:  var(--pz-blue-500);
  --color-primary-press:  var(--pz-blue-700);
  --color-on-primary:     var(--pz-white);

  --color-accent:      var(--pz-blue-300);
  --color-link:        var(--pz-blue-600);
  --color-link-hover:  var(--pz-blue-700);

  --color-border:        var(--pz-line);
  --color-border-strong: var(--pz-line-strong);
  --color-focus-ring:    var(--pz-blue-300);
}