/* ============================================================
   Med Billing RCM — Design Tokens
   Hybrid Editorial Luxury + Dark Authority
   Source: Brand UI/UX System v1.0 (March 2026)
   ============================================================ */

/* ---------- FONTS ---------- */
/* Poppins (headlines) + Montserrat (body) — loaded from Google Fonts CDN.
   Substitute with local files under /fonts/ if you self-host. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* =========================================================
     COLOR — SEMANTIC BRAND
     Ratio rule: Navy 60% / Green 25% / Gold 10% / Teal 5%
     ========================================================= */

  /* Navy — Authority & Structure (primary identity) */
  --navy-900: #0D1029;   /* midnight — grounding close / dark hero */
  --navy-800: #141939;   /* deep navy */
  --navy-700: #1A204F;   /* CORE navy — the brand's anchor */
  --navy-600: #252D6A;   /* hover / gradient partner */
  --navy-500: #3A447C;
  --navy-400: #525D99;
  --navy-300: #6E77B8;   /* strokes on light, line icons */
  --navy-200: #C8CBE5;   /* subtle borders */
  --navy-100: #E0E2EF;
  --navy-50:  #ECEDF5;   /* enterprise light bg / icon container fill */

  /* Green — Action & Growth (CTAs only) */
  --green-700: #1e8fb8;
  --green-600: #5ac6f1;   /* CORE — primary CTA base */
  --green-500: #7dd4f5;   /* CTA hover */
  --green-400: #9de0f8;
  --green-300: #b3e8fa;   /* text on dark, overline labels */
  --green-200: #cdf0fc;
  --green-100: #e2f7fd;
  --green-50:  #f0fbfe;   /* "growth" section background */

  /* Gold — Premium & Metrics */
  --gold-700: #A67913;
  --gold-600: #C68E1F;
  --gold-500: #D49B28;   /* CORE — KPI numbers on dark */
  --gold-400: #DEAD4D;
  --gold-300: #E8BF72;   /* metric accents on dark */
  --gold-200: #F1D79E;
  --gold-100: #F8EAC7;
  --gold-50:  #FDF6E4;

  /* Teal — Trust & Interaction (links only) */
  --teal-700: #155E5E;
  --teal-600: #1F8282;   /* CORE — text links */
  --teal-500: #28A0A0;   /* link hover */
  --teal-400: #4BB5B5;   /* connectors, arrow tips */
  --teal-300: #7ACBCB;
  --teal-200: #B5E2E2;
  --teal-100: #DBF0F0;
  --teal-50:  #EEF8F8;

  /* Neutrals — warm charcoal, never pure black */
  --n-900: #1C1D24;
  --n-800: #2A2B34;
  --n-700: #3A3B48;   /* CORE body text on light */
  --n-600: #52535F;
  --n-500: #6E7082;   /* subheadlines, muted labels */
  --n-400: #9092A2;   /* disabled / desaturated logos */
  --n-300: #B4B6C2;
  --n-200: #D3D4DC;   /* dividers */
  --n-100: #E6E7EC;
  --n-50:  #F2F3F8;   /* enterprise cool slate bg */

  /* Section background tokens (named from brand book) */
  --bg-dark-authority:       #0D1029;
  --bg-dark-authority-grad:  linear-gradient(180deg, #0D1029 0%, #1A204F 100%);
  --bg-dark-closing:         linear-gradient(135deg, #1A204F 0%, #252D6A 100%);
  --bg-editorial-white:      #FFFFFF;
  --bg-editorial-warm:       #FAFAF6;  /* cream */
  --bg-editorial-linen:      #F6F5F0;
  --bg-enterprise-slate:     #F2F3F8;
  --bg-enterprise-ultra:     #ECEDF5;
  --bg-growth-mist:          #f0fbfe;

  /* =========================================================
     TYPE
     ========================================================= */
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Montserrat', ui-sans-serif, system-ui, sans-serif;

  /* Type scale (desktop) */
  --fs-hero:        60px;  /* Poppins 600 */
  --fs-hero-min:    52px;
  --fs-section:     40px;  /* Poppins 600 */
  --fs-section-min: 32px;
  --fs-card-title:  24px;  /* Poppins 600 */
  --fs-card-title-min: 20px;
  --fs-metric:      72px;  /* Poppins 700 */
  --fs-metric-min:  48px;
  --fs-lead:        18px;  /* Montserrat 300 */
  --fs-lead-min:    17px;
  --fs-body:        16px;  /* Montserrat 400 */
  --fs-body-min:    15px;
  --fs-nav:         14px;  /* Montserrat 500 */
  --fs-button:      14px;  /* Montserrat 600 */
  --fs-label:       11px;  /* Montserrat 600-700 uppercase */
  --fs-label-min:   10px;

  --lh-tight:       1.0;    /* metrics */
  --lh-headline:    1.12;   /* hero */
  --lh-section:     1.2;
  --lh-card:        1.25;
  --lh-lead:        1.65;
  --lh-body:        1.7;

  --ls-headline:    -0.5px;
  --ls-section:     -0.3px;
  --ls-nav:          0.3px;
  --ls-button:       0.4px;
  --ls-label:        1.8px;

  /* =========================================================
     SPACING — generous whitespace is a luxury signal
     ========================================================= */
  --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: 60px;
  --space-20: 80px;
  --space-24: 100px;
  --space-28: 120px;

  --container-max: 1200px;
  --content-max:   640px;
  --gutter:        40px;
  --section-pad-y: 100px;

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs: 6px;    /* square tags */
  --radius-sm: 8px;    /* buttons, inputs */
  --radius-md: 12px;   /* glass cards, thumbnails */
  --radius-lg: 14px;   /* content cards, images */
  --radius-pill: 100px;

  /* =========================================================
     SHADOWS — navy-tinted, never pure black
     ========================================================= */
  --shadow-card:        0 4px 20px rgba(26, 32, 79, 0.06);
  --shadow-card-hover:  0 12px 40px rgba(26, 32, 79, 0.10);
  --shadow-portrait:    0 4px 20px rgba(26, 32, 79, 0.08);
  --shadow-cta:         0 2px 12px rgba(90, 198, 241, 0.25);
  --shadow-cta-hover:   0 6px 20px rgba(90, 198, 241, 0.35);

  /* =========================================================
     MOTION — luxury watch mechanism, never playful
     ========================================================= */
  --ease-brand: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --dur-quick:  0.2s;
  --dur-base:   0.25s;
  --dur-card:   0.3s;
}

/* ============================================================
   BASE & SEMANTIC CLASSES
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--n-700);
  background: var(--bg-editorial-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — Poppins SemiBold */
.h-hero,
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-hero-min), 4vw + 1rem, var(--fs-hero));
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  color: var(--navy-700);
  margin: 0;
  text-transform: capitalize;
}

.h-section,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-section-min), 2vw + 1rem, var(--fs-section));
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  color: var(--navy-700);
  margin: 0;
  text-transform: capitalize;
}

.h-card,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-card-title-min), 1vw + 1rem, var(--fs-card-title));
  line-height: var(--lh-card);
  color: var(--navy-700);
  margin: 0;
  text-transform: capitalize;
}

/* Metric — oversized typographic anchor */
.metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-metric-min), 4vw + 1rem, var(--fs-metric));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--navy-700);
}
.metric--dark { color: var(--gold-500); }
.metric--success { color: var(--green-600); }

/* Lead / subheadline */
.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--n-500);
  max-width: var(--content-max);
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--n-700);
  max-width: var(--content-max);
  margin: 0 0 var(--space-4);
}

/* Overline / label — uppercase, letter-spaced, green */
.overline,
.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--green-600);
  display: inline-block;
}
.overline--gold { color: var(--gold-500); }
.overline--dark-bg { color: var(--green-300); }

/* Links — teal only */
a, .text-link {
  color: var(--teal-600);
  text-decoration-color: var(--teal-400);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-quick) var(--ease-brand);
}
a:hover { color: var(--teal-500); }

/* Dark-section text defaults (wrap your hero/dark sections with this) */
.on-dark {
  color: rgba(255, 255, 255, 0.6);
}
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark .h-hero, .on-dark .h-section, .on-dark .h-card { color: #FFFFFF; }
.on-dark .lead { color: rgba(255, 255, 255, 0.5); }
.on-dark p, .on-dark .body { color: rgba(255, 255, 255, 0.6); }
.on-dark .overline { color: var(--green-300); }

/* Navigation text */
.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  color: var(--n-700);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-brand);
}
.on-dark .nav-link { color: rgba(255, 255, 255, 0.6); }
.on-dark .nav-link:hover { color: #FFFFFF; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-button);
  letter-spacing: var(--ls-button);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-brand),
              background var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand),
              border-color var(--dur-base) var(--ease-brand);
  text-decoration: none;
}
.btn:hover { transform: scale(1.02); }

.btn--primary {
  background: var(--green-600);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  background: var(--green-500);
  box-shadow: var(--shadow-cta-hover);
}

.btn--secondary {
  background: var(--navy-700);
  color: #FFFFFF;
}
.btn--secondary:hover { background: var(--navy-600); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.24);
}

.btn--large { padding: 16px 40px; font-size: 16px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  transition: transform var(--dur-card) var(--ease-brand),
              box-shadow var(--dur-card) var(--ease-brand);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.card--accent-navy   { border-top: 3px solid var(--navy-700); }
.card--accent-green  { border-top: 3px solid var(--green-600); }
.card--accent-teal   { border-top: 3px solid var(--teal-600); }
.card--accent-gold   { border-top: 3px solid var(--gold-500); }

.card--glass {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  box-shadow: none;
  padding: 28px;
}
.card--glass:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
  box-shadow: none;
}

.card--bordered {
  box-shadow: none;
  border: 1px solid var(--navy-100);
}

/* ============================================================
   TAGS & BADGES
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tag--pill   { border-radius: var(--radius-pill); padding: 6px 16px; }
.tag--square { border-radius: var(--radius-xs); padding: 4px 12px; }

.tag--navy  { background: var(--navy-50);  color: var(--navy-700); }
.tag--green { background: rgba(82, 133, 50, 0.12); color: var(--green-700); }
.tag--gold  { background: var(--gold-50);  color: var(--gold-700); }
.tag--teal  { background: var(--teal-50);  color: var(--teal-700); }
.tag--dark  { background: rgba(82, 133, 50, 0.15); color: var(--green-300); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.section--dark {
  background: var(--bg-dark-authority-grad);
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
}
.section--dark::before {
  /* subtle green radial glow */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(82, 133, 50, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(212, 155, 40, 0.05) 0%, transparent 45%);
  pointer-events: none;
}

.section--cream  { background: var(--bg-editorial-warm); }
.section--linen  { background: var(--bg-editorial-linen); }
.section--slate  { background: var(--bg-enterprise-slate); }
.section--mist   { background: var(--bg-growth-mist); }

/* Accent rule — 48×3 navy→green gradient (under overlines) */
.accent-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-700), var(--green-600));
  margin: 8px 0 24px;
  border: 0;
}