/* ============================================================
   HealthFees — Brand System A: The Ledger (universal)
   Loaded by every page: marketing site, logged-in Insights app,
   and the onboarding flow. Single source of truth for brand
   identity (ink, action color, type, logo mark).

   Full brand bible + master assets:
     Obsidian → 03-Resources/Brand/HealthFees-System-A-Ledger
     Prototype swatches → mockups/brand-kit.html

   NOT included here: --font-data. Financial figures keep their
   context's own data font (IBM Plex Mono in the app — a deliberate
   "precise financial data" cue; Inter in marketing, set locally in
   site/site-brand.css).

   Governing rule: interaction color ≠ data color ≠ brand ink.
     ink navy #0A1B3D — surfaces, type. Never a button fill on white.
     cobalt   #1740C6 — ACTION + key numbers: buttons, links, mark, focus.
     signal low/mid/high — PRICING DATA only. Never decorative, never in the logo.
   Keep accent under ~10% of any layout.

   Dark mode: intentionally dropped (no navy/cobalt dark palette
   designed yet). The blocks below reassert the light values against
   tokens.css's dark-mode selectors so a visitor's OS dark preference
   (or a stray data-theme) can't resurface the old theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap');

:root {
  /* ---- brand ink + action (overrides tokens.css semantic layer) ---- */
  --text:          #0A1B3D;   /* ink navy */
  --text-2:        #445872;   /* 7.3:1 on white */
  --muted:         #566880;   /* 5.7:1 on white, 5.3:1 on surface — WCAG AA */
  --mist:          #CFD4DD;   /* faded "overpay" tint — support only */
  --border:        #E1E7EE;
  --border-strong: #C6D0DB;
  --bg:            #FFFFFF;
  --bg-subtle:     #F4F7FA;
  --card:          #FFFFFF;
  --surface:       #F4F7FA;
  --surface-2:     #E9EEFB;

  --accent:        #1740C6;   /* cobalt — action only */
  --accent-hover:  #1235A8;
  --accent-active: #0E2C8C;
  --on-accent:     #FFFFFF;
  --accent-bg:     #EAEEFB;
  --accent-bg-2:   #D9E1F8;
  --accent-border: #B4C4F0;

  /* signal colors — pricing data ONLY (from the bible) */
  --low:        #0B9F6E;
  --low-bg:     #E6F6F0;
  --mid:        #C8A415;
  --mid-bg:     #FBF3D8;
  --high:       #E33F44;
  --high-bg:    #FCE7E7;
  --success:    #0B7A55;
  --danger:     #E33F44;

  --chart-grid:  #EAEFF4;
  --chart-axis:  #C6D0DB;
  --chart-label: #566880;

  /* chart series — "you" in brand cobalt, comparison in mist/slate */
  --series-you:         #1740C6;
  --series-you-soft:    #D9E1F8;
  --series-median:      #94A0B0;
  --series-median-soft: #CFD4DD;

  --font-ui:      "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-display: "Poppins", -apple-system, system-ui, "Segoe UI", sans-serif;

  --shadow-sm: 0 1px 2px rgba(10,27,61,0.05);
  --shadow-md: 0 1px 2px rgba(10,27,61,0.05), 0 16px 40px -16px rgba(10,27,61,0.16);
  --shadow-lg: 0 2px 4px rgba(10,27,61,0.06), 0 32px 64px -24px rgba(10,27,61,0.22);
  --ring: 0 0 0 3px var(--accent-bg-2);

  color-scheme: light;
}

/* dark mode dropped — reassert brand light values so OS/system dark
   preference (and any stray data-theme="dark") can't surface tokens.css's
   old dark palette underneath the new brand */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #0A1B3D; --text-2: #445872; --muted: #566880; --mist: #CFD4DD;
    --border: #E1E7EE; --border-strong: #C6D0DB;
    --bg: #FFFFFF; --bg-subtle: #F4F7FA; --card: #FFFFFF; --surface: #F4F7FA; --surface-2: #E9EEFB;
    --accent: #1740C6; --accent-hover: #1235A8; --accent-active: #0E2C8C; --on-accent: #FFFFFF;
    --accent-bg: #EAEEFB; --accent-bg-2: #D9E1F8; --accent-border: #B4C4F0;
    --low: #0B9F6E; --low-bg: #E6F6F0; --mid: #C8A415; --mid-bg: #FBF3D8;
    --high: #E33F44; --high-bg: #FCE7E7; --success: #0B7A55; --danger: #E33F44;
    --chart-grid: #EAEFF4; --chart-axis: #C6D0DB; --chart-label: #566880;
    --series-you: #1740C6; --series-you-soft: #D9E1F8; --series-median: #94A0B0; --series-median-soft: #CFD4DD;
    --shadow-sm: 0 1px 2px rgba(10,27,61,0.05);
    --shadow-md: 0 1px 2px rgba(10,27,61,0.05), 0 16px 40px -16px rgba(10,27,61,0.16);
    --shadow-lg: 0 2px 4px rgba(10,27,61,0.06), 0 32px 64px -24px rgba(10,27,61,0.22);
    --ring: 0 0 0 3px #D9E1F8;
    color-scheme: light;
  }
}
:root[data-theme="dark"] {
  --text: #0A1B3D; --text-2: #445872; --muted: #566880; --mist: #CFD4DD;
  --border: #E1E7EE; --border-strong: #C6D0DB;
  --bg: #FFFFFF; --bg-subtle: #F4F7FA; --card: #FFFFFF; --surface: #F4F7FA; --surface-2: #E9EEFB;
  --accent: #1740C6; --accent-hover: #1235A8; --accent-active: #0E2C8C; --on-accent: #FFFFFF;
  --accent-bg: #EAEEFB; --accent-bg-2: #D9E1F8; --accent-border: #B4C4F0;
  --low: #0B9F6E; --low-bg: #E6F6F0; --mid: #C8A415; --mid-bg: #FBF3D8;
  --high: #E33F44; --high-bg: #FCE7E7; --success: #0B7A55; --danger: #E33F44;
  --chart-grid: #EAEFF4; --chart-axis: #C6D0DB; --chart-label: #566880;
  --shadow-sm: 0 1px 2px rgba(10,27,61,0.05);
  --shadow-md: 0 1px 2px rgba(10,27,61,0.05), 0 16px 40px -16px rgba(10,27,61,0.16);
  --shadow-lg: 0 2px 4px rgba(10,27,61,0.06), 0 32px 64px -24px rgba(10,27,61,0.22);
  --ring: 0 0 0 3px #D9E1F8;
  color-scheme: light;
}

body { font-family: var(--body, var(--font-ui)); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- logo: leveled-rates mark + two-tone wordmark ----------
   The mark is drawn from brand/hf-ledger-mark.svg (url is relative to
   THIS stylesheet, so it resolves from both hifi/ and hifi/site/).
   Markup: <span class="logo"><span class="mark"></span>Health<span class="wm-fees">Fees</span></span> */
.site-nav .logo, .masternav .logo, .ob-brand, footer .wordmark, .wordmark {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--text);
  display: inline-flex; align-items: center; gap: 0; /* spacing lives on .mark's margin so Health+Fees stay flush */
  text-decoration: none;
}
/* logo is a link (→ home when logged out, → dashboard when logged in) — never underline it */
.site-nav .logo:hover, .masternav .logo:hover, .ob-brand:hover { text-decoration: none; }
.wm-fees { color: var(--accent); }
.site-nav .mark, .masternav .mark {
  width: 34px; height: 34px; margin-right: 9px; border-radius: 0; background: none;
  background-image: url("brand/hf-ledger-mark.svg");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  font-size: 0; color: transparent; overflow: hidden; flex: none;
}
.site-nav .mark::after, .masternav .mark::after { content: none; } /* kill the old cobalt dot */
.ob-brand .mark {
  width: 30px !important; height: 30px !important; margin-right: 8px !important; border-radius: 0 !important; background: none !important;
  background-image: url("brand/hf-ledger-mark.svg") !important;
  background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important;
  font-size: 0 !important; color: transparent !important; flex: none !important;
}

/* ---------- context-aware buttons: primary auto-inverts on dark panels ---------- */
.panel-dark {
  background: var(--text); color: #E7ECF3;
  --text: #FFFFFF; --text-2: #A6B7CC; --muted: #8296AE;
}
.panel-dark h1, .panel-dark h2, .panel-dark h3 { color: #fff; }
.panel-dark .btn-primary { background: #fff; color: var(--navy, #0A1B3D); border-color: #fff; }
.panel-dark .btn-primary:hover { background: #EAEEFB; }
.panel-dark .btn:not(.btn-primary) { color: #fff; border-color: rgba(255,255,255,0.3); background: transparent; box-shadow: none; }
.panel-dark .btn:not(.btn-primary):hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* eyebrow: small-caps label used above H1s and section heads */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-hover); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); }