/* ============================================================
   HavenFi — Colors & Type Foundations
   B2B fintech for community banks & credit unions.
   Calm, operational, financial-services credible.
   Load Inter + IBM Plex Mono before this file:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---------- Brand / accent (blue) ---------- */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;   /* accent / primary CTA */
  --blue-700: #1d4ed8;   /* CTA hover */
  --blue-800: #1e40af;   /* accent dark */

  /* ---------- Neutrals (slate) ---------- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;  /* secondary text */
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;  /* primary text */

  /* ---------- Semantic status ---------- */
  --warning:      #d97706;
  --warning-bg:   #fffbeb;
  --warning-border:#fde68a;
  --danger:       #dc2626;
  --danger-bg:    #fef2f2;
  --danger-border:#fecaca;
  --success:      #15803d;
  --success-bg:   #f0fdf4;
  --success-border:#bbf7d0;
  --info:         #2563eb;
  --info-bg:      #eff6ff;
  --info-border:  #bfdbfe;

  /* ---------- Surfaces / roles ---------- */
  --bg:           #f4f6f9;  /* app/page background */
  --panel:        #ffffff;  /* cards & panels */
  --panel-subtle: #f8fafc;  /* nested / striped rows */
  --fg1:          var(--slate-900); /* primary text */
  --fg2:          var(--slate-500); /* secondary text */
  --fg3:          var(--slate-400); /* tertiary / captions */
  --border:       #e2e8f0;  /* hairline dividers, card borders */
  --border-strong:#cbd5e1;
  --ring:         rgba(37, 99, 235, 0.35); /* focus ring */

  /* ---------- Type families ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (1.20 minor-third, 16px base) ---------- */
  --text-xs:   12px;  /* labels, metadata, table captions */
  --text-sm:   14px;  /* secondary body, dense UI */
  --text-base: 16px;  /* body */
  --text-md:   18px;  /* lead body */
  --text-lg:   20px;  /* card titles */
  --text-xl:   24px;  /* section subheads */
  --text-2xl:  30px;  /* H3 */
  --text-3xl:  38px;  /* H2 */
  --text-4xl:  48px;  /* H1 / hero (smaller) */
  --text-5xl:  60px;  /* hero display */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;  /* large display */
  --tracking-snug:  -0.01em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:  0.04em;   /* eyebrows / overlines */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii (restrained, operational) ---------- */
  --radius-sm: 4px;   /* inputs, chips, badges */
  --radius-md: 8px;   /* buttons, small cards */
  --radius-lg: 12px;  /* cards, panels */
  --radius-xl: 16px;  /* hero panels, modals */
  --radius-full: 999px;

  /* ---------- Elevation (soft, low-contrast) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-ring: 0 0 0 1px var(--border);          /* hairline "border" via shadow */
  --shadow-focus: 0 0 0 3px var(--ring);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
}

/* ============================================================
   Semantic element styles — apply to a scoped container
   (e.g. class="hv") or rely on globals in standalone files.
   ============================================================ */

.hv-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.hv-display {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.hv-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.hv-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.hv-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.hv-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue-600);
}
.hv-lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.hv-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg1);
}
.hv-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.hv-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg3);
}
/* Operational / data face — risk scores, account #s, timestamps, IDs */
.hv-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.hv-data {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}