/* Pharmbills brand theme — mirrors the design tokens used on pharmbills.com.
   Colors are pulled from the public Webflow stylesheet's
   --_global-colors---main--* palette. */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:wght@500;600;700;800&display=swap");

:root {
  /* Brand navy stack */
  --pb-rich-black:    #080f19;
  --pb-penn-blue:     #001446;
  --pb-oxford-blue:   #0a2648;
  --pb-yale-blue:     #173a62;
  --pb-yinmn-blue:    #294c7f;
  --pb-berkeley-blue: #092e59;
  --pb-navy:          #081629;   /* dominant dark background on pharmbills.com */
  --pb-navy-soft:     #0a1d37;   /* slightly lifted panels over navy */

  /* Brand blue accents */
  --pb-sapphire:       #176bd4;  /* primary action blue */
  --pb-sapphire-hover: #0c4484;
  --pb-regal-navy:     #023079;
  --pb-bleu-de-france: #3587e5;
  --pb-polynesian:     #0c4484;

  /* Brand teal / aqua */
  --pb-teal:        #2bb5bc;     /* brand teal */
  --pb-teal-deep:   #0495ae;
  --pb-sky-surge:   #68bbdb;
  --pb-non-photo:   #8ed7e8;
  --pb-aquamarine:  #9cefd1;

  /* Brand orange CTA */
  --pb-orange:       #ff9100;
  --pb-orange-hover: #cb7401;
  --pb-orange-soft:  #ff6d3d;

  /* Neutrals */
  --pb-white:        #ffffff;
  --pb-anti-flash:   #f0f0f0;
  --pb-light:        #eef4fb;    /* page background — soft blue-tinted white */
  --pb-light-teal:   #ecf8f9;
  --pb-border:       #d8e2ef;
  --pb-border-strong:#bfcee0;
  --pb-text:         #081629;
  --pb-text-soft:    #173a62;
  --pb-muted:        #758696;
  --pb-muted-soft:   #9fb1c7;

  /* Status (kept close to what the reconciliation UI already expects) */
  --pb-red:         #d23434;      /* derived from brand imperial-red #ff4343 */
  --pb-red-bg:      #fde4e4;
  --pb-amber:       #b06b00;
  --pb-amber-bg:    #fff1d6;
  --pb-green:       #0e7b55;
  --pb-green-bg:    #d8f5e6;
  --pb-gray-bg:     #e7ecf2;

  /* Shadows & radii */
  --pb-shadow-sm: 0 1px 4px rgba(8, 22, 41, .06);
  --pb-shadow-md: 0 4px 16px rgba(8, 22, 41, .10);
  --pb-shadow-lg: 0 18px 40px rgba(8, 22, 41, .22);
  --pb-radius-sm: 6px;
  --pb-radius:    10px;
  --pb-radius-lg: 16px;

  /* Back-compat aliases — existing templates reference these bare names */
  --navy:   var(--pb-navy);
  --blue:   var(--pb-sapphire);
  --teal:   var(--pb-teal);
  --light:  var(--pb-light);
  --border: var(--pb-border);
  --text:   var(--pb-text);
  --muted:  var(--pb-muted);
  --red:    var(--pb-red);
  --amber:  var(--pb-amber);
  --green:  var(--pb-green);
  --bg-red:   var(--pb-red-bg);
  --bg-amber: var(--pb-amber-bg);
  --bg-green: var(--pb-green-bg);
  --bg-gray:  var(--pb-gray-bg);
}

/* ── Typography ───────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--pb-text);
}

h1, h2, h3, h4, h5 {
  font-family: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pb-text);
}

a { color: var(--pb-sapphire); }
a:hover { color: var(--pb-sapphire-hover); }

/* ── Shared brand logo treatment ─────────────────────────────────────── */
.pb-logo-main,
.logo-main {
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.pb-logo-tag,
.logo-tag {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--pb-teal);
  letter-spacing: .01em;
}

/* ── Focus ring ──────────────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pb-sky-surge);
  outline-offset: 2px;
}

/* ── Scrollbar polish (webkit) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(8, 22, 41, .18);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(8, 22, 41, .3); }
::-webkit-scrollbar-track { background: transparent; }