/* =============================================================================
   VELOCITY HEALTH — DESIGN TOKENS  (concept build)
   Canonical --vh-* custom properties. White canvas, Oxford Blue accent,
   Emerald = mission only, Plum = ENGAGE/AI only. Avenir Next Light default.
   Source of truth: skills/velocity/references/velocity-tokens.css
   ============================================================================= */

:root {
  /* Anchor hues */
  --vh-oxford:#0D3572; --vh-frost:#C4D2E6; --vh-emerald:#007A63; --vh-plum:#7C4DBC;

  /* Blue ramp */
  --vh-navy-950:#05182E; --vh-navy-900:#071E3D; --vh-navy-800:#0D3572;
  --vh-navy-700:#1248A0; --vh-navy-600:#1A5CA6; --vh-navy-500:#2478C8;
  --vh-navy-400:#3A96D4; --vh-navy-300:#6AB8E8; --vh-navy-200:#A8D6F5;
  --vh-navy-100:#D6ECFB; --vh-navy-50:#EDF5FD;

  /* Silver / frost ramp */
  --vh-silver-800:#2E3D52; --vh-silver-700:#445A76; --vh-silver-600:#5E7899;
  --vh-silver-500:#8099B5; --vh-silver-400:#A2B8CE; --vh-silver-300:#C4D2E6;
  --vh-silver-200:#DDE6F0; --vh-silver-100:#EDF2F7; --vh-silver-50:#F4F6F9;
  --vh-white:#FFFFFF;

  /* Emerald ramp (mission) */
  --vh-emerald-700:#005745; --vh-emerald-600:#007A63; --vh-emerald-500:#009E80;
  --vh-emerald-400:#2DBD97; --vh-emerald-300:#5CCFB5; --vh-emerald-100:#C8F0E9;
  --vh-emerald-50:#E8F8F5;

  /* Plum ramp (ENGAGE / AI) */
  --vh-plum-800:#2D1B69; --vh-plum-700:#4527A0; --vh-plum-600:#5E3AB0;
  --vh-plum-500:#7C4DBC; --vh-plum-400:#9966CC; --vh-plum-300:#B589D9;
  --vh-plum-100:#E8D6F5; --vh-plum-50:#F4EDF9;

  /* Semantic */
  --vh-primary:#0D3572; --vh-primary-hover:#1248A0; --vh-primary-light:#1A5CA6;
  --vh-surface:#C4D2E6; --vh-surface-light:#F4F6F9; --vh-surface-white:#FFFFFF;
  --vh-surface-dark:#05182E;
  --vh-border:#A2B8CE; --vh-border-light:#DDE6F0; --vh-border-strong:#5E7899;
  --vh-text-primary:#0D1929; --vh-text-secondary:#2E3D52; --vh-text-tertiary:#5E7899;
  --vh-text-inverse:#F4F6F9; --vh-text-link:#1A5CA6; --vh-text-link-hover:#0D3572;
  --vh-mission:#007A63; --vh-mission-hover:#009E80; --vh-mission-light:#E8F8F5;
  --vh-ai:#7C4DBC; --vh-ai-hover:#9966CC; --vh-ai-light:#F4EDF9;
  --vh-ink:#0D1929; --vh-graphite:#2E3D52; --vh-whisper:#5E7899;
  --vh-hairline:#DDE6F0; --vh-cloud:#F4F6F9;

  /* Type */
  --vh-font-sans:"Avenir Next","Avenir","Nunito Sans","DM Sans",system-ui,-apple-system,sans-serif;
  --vh-font-serif:Georgia,"Times New Roman",serif;
  --vh-font-light:300; --vh-font-medium:500;

  /* Tracking */
  --vh-tracking-tight:-0.01em; --vh-tracking-wide:0.08em; --vh-tracking-wider:0.14em;
  --vh-tracking-caption:0.06em;

  /* Radius */
  --vh-radius-sm:2px; --vh-radius-md:4px; --vh-radius-lg:8px; --vh-radius-xl:12px;
  --vh-radius-pill:9999px;

  /* Shadows — Oxford-tinted, never gray */
  --vh-shadow-sm:0 2px 4px -1px rgba(13,53,114,.06),0 1px 2px -1px rgba(13,53,114,.04);
  --vh-shadow-md:0 4px 8px -2px rgba(13,53,114,.08),0 2px 4px -2px rgba(13,53,114,.06);
  --vh-shadow-lg:0 8px 18px -4px rgba(13,53,114,.10),0 4px 8px -3px rgba(13,53,114,.06);
  --vh-shadow-xl:0 16px 32px -8px rgba(13,53,114,.12),0 6px 12px -4px rgba(13,53,114,.08);
}

/* -----------------------------------------------------------------------------
   SHARED BASE (concepts only) — reset + brand defaults
   Avenir Next is not web-licensed here; Nunito Sans 300 is the brand web fallback.
   ----------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--vh-font-sans);
  font-weight:var(--vh-font-light);
  color:var(--vh-ink);
  background:var(--vh-surface-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-weight:var(--vh-font-light);line-height:1.15;letter-spacing:var(--vh-tracking-tight)}
a{color:var(--vh-text-link);text-decoration:none}
img{max-width:100%;display:block}

/* Eyebrow label — tracking does the emphasis work, never bold */
.vh-eyebrow{
  font-weight:var(--vh-font-medium);
  font-size:.72rem;
  letter-spacing:var(--vh-tracking-wider);
  text-transform:uppercase;
}

/* Velocity wordmark placeholder — swap for the official logo SVG/PNG */
.vh-logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:var(--vh-font-medium);
  letter-spacing:.02em;font-size:1.3rem;color:var(--vh-oxford)}
.vh-logo .mark{width:22px;height:22px;transform:rotate(45deg);background:var(--vh-oxford);
  border-radius:3px;display:inline-block;position:relative}
.vh-logo .mark::after{content:"V";position:absolute;inset:0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;
  font-style:italic;font-weight:var(--vh-font-medium)}

/* Buttons */
.vh-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;
  border-radius:var(--vh-radius-md);font-size:.95rem;font-weight:var(--vh-font-medium);
  letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.vh-btn--primary{background:var(--vh-oxford);color:#fff}
.vh-btn--primary:hover{background:var(--vh-primary-hover)}
.vh-btn--ghost{background:transparent;color:var(--vh-oxford);border-color:var(--vh-border)}
.vh-btn--ghost:hover{border-color:var(--vh-oxford)}

/* Concept-document confidentiality strip (not site chrome) */
.vh-confidential{font-size:.7rem;letter-spacing:var(--vh-tracking-caption);
  color:var(--vh-whisper);text-align:center;padding:1.25rem;background:var(--vh-surface-light);
  border-top:1px solid var(--vh-border-light)}

/* =============================================================================
   VELOCITY GLASS — site-wide frosted/ghost panels
   Use over dark atmospheric backgrounds or imagery. All variants share the same
   navy-tinted translucency, frost border, soft top inset highlight, and a long
   cool shadow. Cool palette only.
   ============================================================================= */

.vh-glass{
  background:rgba(13,53,114,.22);
  backdrop-filter:blur(20px) saturate(115%);
  -webkit-backdrop-filter:blur(20px) saturate(115%);
  border:1px solid rgba(168,214,245,.22);
  box-shadow:
    0 14px 38px -12px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:var(--vh-radius-xl)
}

.vh-glass--strong{
  background:rgba(13,53,114,.38);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  border:1px solid rgba(168,214,245,.32);
  box-shadow:
    0 16px 42px -12px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.12);
  border-radius:var(--vh-radius-xl)
}

.vh-glass--pill{
  background:rgba(13,53,114,.24);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  border:1px solid rgba(168,214,245,.26);
  box-shadow:
    0 6px 20px -6px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:var(--vh-radius-pill)
}

.vh-glass--bar{
  background:rgba(13,53,114,.18);
  backdrop-filter:blur(16px) saturate(110%);
  -webkit-backdrop-filter:blur(16px) saturate(110%);
  border-bottom:1px solid rgba(168,214,245,.18);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)
}

.vh-glass-hover{transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.vh-glass-hover:hover{
  background:rgba(13,53,114,.4);
  border-color:rgba(168,214,245,.5);
  transform:translateY(-3px);
  box-shadow:
    0 24px 56px -16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.14)
}

/* Velocity logo on dark backgrounds — small white plate so brand colors read */
.vh-logo-mark{
  display:inline-flex;align-items:center;text-decoration:none;
  background:rgba(255,255,255,.94);
  padding:.35rem .7rem;
  border-radius:6px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.3);
  transition:background .2s ease
}
.vh-logo-mark:hover{background:#fff}
.vh-logo-mark img{height:30px;width:auto;display:block}