/* ============================================================
   VARICK HEALTH — Design Tokens
   Single source of truth for color, type, spacing, motion.
   Brand: provider credentialing & enrollment, behavioral health.
   Anchored on the brand reference: indigo #1F18A4, navy ink #232946.
   ============================================================ */

/* Fonts load from Google Fonts CDN (no local TTFs bundled — see README).
   Source Serif 4 = editorial display | Hanken Grotesk = UI/body (matches
   the wordmark grotesque) | IBM Plex Mono = credential IDs, NPIs, dates. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND COLOR ---------- */
  --vh-indigo:        #1F18A4;  /* primary — action, brand fields, links */
  --vh-indigo-700:    #181279;  /* hover / pressed */
  --vh-indigo-800:    #120D54;  /* deep, on-indigo gradients */
  --vh-indigo-300:    #8C84DC;  /* decorative tint */
  --vh-indigo-100:    #E4E2F7;  /* selection / light fill */
  --vh-indigo-50:     #F1F0FB;  /* subtle wash, hover rows */

  --vh-navy:          #232946;  /* ink — body text, dark surfaces */
  --vh-navy-800:      #1A1F38;  /* footer, dark panels */
  --vh-navy-900:      #11152A;  /* deepest */

  /* ---------- NEUTRALS (cool) ---------- */
  --vh-white:         #FFFFFF;
  --vh-wash:          #F5F6FA;  /* page-alt background (from reference) */
  --vh-mist:          #ECEEF4;  /* alt card / inset fill */
  --vh-line:          #E2E5EE;  /* hairline border, default */
  --vh-line-strong:   #CFD3E0;  /* stronger divider, input border */
  --vh-line-faint:    #EFF1F6;  /* lightest rule */

  /* ---------- TEXT ---------- */
  --vh-text:          #232946;  /* primary (= navy) */
  --vh-text-muted:    #565E7E;  /* secondary / supporting */
  --vh-text-faint:    #8A90A8;  /* captions, meta, placeholder */
  --vh-text-disabled: #B4B8C8;
  --vh-text-on-dark:  #FFFFFF;
  --vh-text-on-dark-muted: #B9BDD0;

  /* ---------- STATUS (credentialing lifecycle) ---------- */
  /* Approved / Enrolled / Verified */
  --vh-ok:            #1F8A5B;
  --vh-ok-bg:         #E6F4ED;
  --vh-ok-text:       #14603F;
  /* In progress / Submitted / Pending review — indigo family */
  --vh-progress:      #1F18A4;
  --vh-progress-bg:   #E9E8F8;
  --vh-progress-text: #1A1466;
  /* Action needed / Expiring soon */
  --vh-warn:          #B97714;
  --vh-warn-bg:       #FBF0DC;
  --vh-warn-text:     #7A4D0B;
  /* Denied / Expired / Error */
  --vh-danger:        #C4362B;
  --vh-danger-bg:     #FAE8E6;
  --vh-danger-text:   #87241C;
  /* Not started / Inactive */
  --vh-idle:          #6B7390;
  --vh-idle-bg:       #EFF1F6;
  --vh-idle-text:     #565E7E;

  /* ---------- TYPE FAMILIES ---------- */
  --vh-serif:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --vh-sans:   'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --vh-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- WEIGHTS ---------- */
  --vh-light:  300;
  --vh-reg:    400;
  --vh-med:    500;
  --vh-semi:   600;
  --vh-bold:   700;
  --vh-black:  800;

  /* ---------- TYPE SCALE ---------- */
  /* Display + headings use the SERIF; titles & UI use the SANS. */
  --vh-display:   64px;  --vh-display-lh: 1.04; --vh-display-ls: -0.022em;
  --vh-h1:        48px;  --vh-h1-lh: 1.08;      --vh-h1-ls: -0.02em;
  --vh-h2:        36px;  --vh-h2-lh: 1.14;      --vh-h2-ls: -0.018em;
  --vh-h3:        27px;  --vh-h3-lh: 1.22;      --vh-h3-ls: -0.012em;
  /* sans titles */
  --vh-title:     21px;  --vh-title-lh: 1.3;    --vh-title-ls: -0.01em;
  --vh-subtitle:  17px;  --vh-subtitle-lh: 1.45;--vh-subtitle-ls: -0.005em;
  /* body */
  --vh-body-lg:   18px;  --vh-body-lg-lh: 1.62;
  --vh-body:      16px;  --vh-body-lh: 1.6;
  --vh-body-sm:   14px;  --vh-body-sm-lh: 1.55;
  --vh-caption:   13px;  --vh-caption-lh: 1.45;
  --vh-eyebrow:   12.5px;--vh-eyebrow-lh: 1.2;  --vh-eyebrow-ls: 0.13em;
  --vh-btn:       15px;  --vh-btn-ls: 0.005em;
  /* mono / data */
  --vh-data:      14px;  --vh-data-lh: 1.45;    --vh-data-ls: -0.01em;
  --vh-data-sm:   12.5px;

  /* ---------- SPACING (4 / 8 base) ---------- */
  --vh-1: 4px;  --vh-2: 8px;  --vh-3: 12px; --vh-4: 16px;
  --vh-5: 20px; --vh-6: 24px; --vh-8: 32px; --vh-10: 40px;
  --vh-12: 48px; --vh-16: 64px; --vh-20: 80px; --vh-24: 96px;
  --vh-page-max: 1280px;
  --vh-page-pad: 24px;
  --vh-page-pad-lg: 48px;

  /* ---------- RADII ---------- */
  /* Squared-but-softened — the brand mark uses a small radius. */
  --vh-radius-xs: 4px;
  --vh-radius-sm: 6px;
  --vh-radius:    8px;
  --vh-radius-lg: 12px;
  --vh-radius-pill: 999px;

  /* ---------- ELEVATION (navy-tinted, restrained) ---------- */
  --vh-shadow-sm: 0 1px 2px rgba(35,41,70,0.06), 0 1px 3px rgba(35,41,70,0.05);
  --vh-shadow:    0 2px 6px rgba(35,41,70,0.06), 0 6px 16px rgba(35,41,70,0.07);
  --vh-shadow-lg: 0 12px 32px rgba(35,41,70,0.12), 0 4px 10px rgba(35,41,70,0.06);
  --vh-ring:      0 0 0 3px rgba(31,24,164,0.18); /* focus ring */

  /* ---------- MOTION ---------- */
  --vh-ease: cubic-bezier(0.33, 0, 0.2, 1);
  --vh-fast: 140ms;
  --vh-base: 220ms;
  --vh-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply on a wrapper or :root scope. Opt-in via .vh class.
   ============================================================ */
.vh, .vh-scope {
  font-family: var(--vh-sans);
  color: var(--vh-text);
  font-size: var(--vh-body);
  line-height: var(--vh-body-lh);
  font-weight: var(--vh-reg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vh-eyebrow {
  font-family: var(--vh-sans);
  font-size: var(--vh-eyebrow);
  line-height: var(--vh-eyebrow-lh);
  letter-spacing: var(--vh-eyebrow-ls);
  text-transform: uppercase;
  font-weight: var(--vh-semi);
  color: var(--vh-indigo);
}

.vh-display { font-family: var(--vh-serif); font-weight: var(--vh-light); font-size: var(--vh-display); line-height: var(--vh-display-lh); letter-spacing: var(--vh-display-ls); }
.vh-h1 { font-family: var(--vh-serif); font-weight: var(--vh-reg); font-size: var(--vh-h1); line-height: var(--vh-h1-lh); letter-spacing: var(--vh-h1-ls); }
.vh-h2 { font-family: var(--vh-serif); font-weight: var(--vh-reg); font-size: var(--vh-h2); line-height: var(--vh-h2-lh); letter-spacing: var(--vh-h2-ls); }
.vh-h3 { font-family: var(--vh-serif); font-weight: var(--vh-reg); font-size: var(--vh-h3); line-height: var(--vh-h3-lh); letter-spacing: var(--vh-h3-ls); }
.vh-title { font-family: var(--vh-sans); font-weight: var(--vh-semi); font-size: var(--vh-title); line-height: var(--vh-title-lh); letter-spacing: var(--vh-title-ls); }
.vh-subtitle { font-family: var(--vh-sans); font-weight: var(--vh-reg); font-size: var(--vh-subtitle); line-height: var(--vh-subtitle-lh); color: var(--vh-text-muted); }
.vh-body-lg { font-size: var(--vh-body-lg); line-height: var(--vh-body-lg-lh); }
.vh-body-sm { font-size: var(--vh-body-sm); line-height: var(--vh-body-sm-lh); }
.vh-caption { font-size: var(--vh-caption); line-height: var(--vh-caption-lh); color: var(--vh-text-faint); }
.vh-data { font-family: var(--vh-mono); font-size: var(--vh-data); letter-spacing: var(--vh-data-ls); }

/* ============================================================
   BUTTONS
   Primary = indigo fill. Hover deepens to indigo-700.
   Secondary = navy outline ghost. Tertiary = text link.
   ============================================================ */
.vh-btn {
  font-family: var(--vh-sans);
  font-size: var(--vh-btn);
  font-weight: var(--vh-semi);
  letter-spacing: var(--vh-btn-ls);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border-radius: var(--vh-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--vh-base) var(--vh-ease), color var(--vh-base) var(--vh-ease), border-color var(--vh-base) var(--vh-ease);
  text-decoration: none;
  white-space: nowrap;
}
.vh-btn--primary { background: var(--vh-indigo); color: #fff; }
.vh-btn--primary:hover { background: var(--vh-indigo-700); }
.vh-btn--secondary { background: transparent; color: var(--vh-navy); border-color: var(--vh-line-strong); }
.vh-btn--secondary:hover { background: var(--vh-navy); color: #fff; border-color: var(--vh-navy); }
.vh-btn--ghost { background: transparent; color: var(--vh-indigo); padding-left: 8px; padding-right: 8px; }
.vh-btn--ghost:hover { color: var(--vh-indigo-700); text-decoration: underline; text-underline-offset: 4px; }
.vh-btn--on-dark { background: #fff; color: var(--vh-navy); }
.vh-btn--on-dark:hover { background: var(--vh-indigo-100); }
.vh-btn:focus-visible { outline: none; box-shadow: var(--vh-ring); }

/* ============================================================
   STATUS PILLS — the credentialing lifecycle vocabulary
   ============================================================ */
.vh-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--vh-sans);
  font-size: var(--vh-caption);
  font-weight: var(--vh-semi);
  letter-spacing: 0.01em;
  padding: 4px 10px 4px 8px;
  border-radius: var(--vh-radius-pill);
  line-height: 1.3;
}
.vh-status::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity: .9; }
.vh-status--ok       { background: var(--vh-ok-bg);       color: var(--vh-ok-text); }
.vh-status--progress { background: var(--vh-progress-bg); color: var(--vh-progress-text); }
.vh-status--warn     { background: var(--vh-warn-bg);     color: var(--vh-warn-text); }
.vh-status--danger   { background: var(--vh-danger-bg);   color: var(--vh-danger-text); }
.vh-status--idle     { background: var(--vh-idle-bg);     color: var(--vh-idle-text); }

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.vh-card {
  background: #fff;
  border: 1px solid var(--vh-line);
  border-radius: var(--vh-radius-lg);
  box-shadow: var(--vh-shadow-sm);
}
.vh-divider { height: 1px; background: var(--vh-line); border: 0; }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.vh-input {
  font-family: var(--vh-sans);
  font-size: var(--vh-body-sm);
  color: var(--vh-text);
  background: #fff;
  border: 1px solid var(--vh-line-strong);
  border-radius: var(--vh-radius-sm);
  padding: 11px 13px;
  transition: border-color var(--vh-fast) var(--vh-ease), box-shadow var(--vh-fast) var(--vh-ease);
  width: 100%;
}
.vh-input::placeholder { color: var(--vh-text-faint); }
.vh-input:focus { outline: none; border-color: var(--vh-indigo); box-shadow: var(--vh-ring); }