/* ============================================================
   PerfectBody LipoHP — Color tokens
   A restrained editorial palette: deep clinical navy, warm
   paper, ink-on-white, with a single electric blue accent and
   a muted antique-gold for fine detail.
   ============================================================ */

:root {
  /* ---- Base neutrals: ink on paper ---- */
  --pb-paper:        #ffffff;  /* primary light surface */
  --pb-paper-warm:   #f7f3ec;  /* warm paper — investment / quiet sections */
  --pb-paper-warm-2: #f6f1e8;  /* alt warm paper */
  --pb-paper-tint:   #fbfaf7;  /* near-white row tint */
  --pb-paper-band:   #f1eee7;  /* table header band */

  --pb-ink:          #1f1f1d;  /* headings on light */
  --pb-ink-strong:   #161615;  /* heaviest ink (display) */
  --pb-body:         #3c3c3a;  /* body copy on light */
  --pb-body-soft:    #4a4a48;  /* secondary body */
  --pb-mute:         #767168;  /* muted / captions */
  --pb-mute-2:       #8b8b88;  /* eyebrow grey */

  /* ---- Deep navy / clinical dark ---- */
  --pb-navy-0:       #05080f;  /* near-black navy base */
  --pb-navy-1:       #070c15;
  --pb-navy-2:       #0a1322;
  --pb-navy-3:       #101d33;  /* lifted navy */
  --pb-black:        #050505;  /* true black sections (footer) */
  --pb-black-warm:   #11110f;  /* warm black admission panel */

  --pb-ink-on-dark:      #f4f2ec;  /* cream text on dark */
  --pb-ink-on-dark-dim:  #d8d6cf;  /* dimmed cream on dark */
  --pb-body-on-dark:     #d0c8bb;  /* warm body on dark */

  /* ---- Accent: electric blue ---- */
  --pb-blue:        #2e6ef0;
  --pb-blue-alt:    #2e7ef0;  /* hero variant */
  --pb-blue-hover:  #3f8cf7;

  /* ---- Accent: antique gold (hairline detail, eyebrows) ---- */
  --pb-gold:        #c2a274;
  --pb-gold-deep:   #b18a56;
  --pb-gold-soft:   #c0a888;

  /* ---- Hairlines / rules ---- */
  --pb-rule:        #e4e4e1;  /* default rule on light */
  --pb-rule-soft:   #ececea;  /* faint rule */
  --pb-rule-warm:   #dededb;  /* warm rule */
  --pb-rule-dark:   rgba(244, 240, 232, 0.12); /* rule on dark */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --pb-surface:          var(--pb-paper);
  --pb-surface-warm:     var(--pb-paper-warm);
  --pb-surface-card:     var(--pb-paper);
  --pb-surface-dark:     var(--pb-navy-0);
  --pb-surface-band:     var(--pb-paper-band);

  --pb-text:             var(--pb-ink);
  --pb-text-body:        var(--pb-body);
  --pb-text-muted:       var(--pb-mute);
  --pb-text-on-dark:     var(--pb-ink-on-dark);

  --pb-accent:           var(--pb-blue);
  --pb-accent-hover:     var(--pb-blue-hover);
  --pb-detail:           var(--pb-gold);

  --pb-border:           var(--pb-rule);
  --pb-border-strong:    #d9d9d6;
}
