/* mama health — Design Tokens (Enterprise / B2B)
   Single source of truth for the corporate-facing system:
   pitch decks, investor materials, B2B website, sales collateral,
   partner / payer / pharma comms.

   Tone: clinical, considered, structured. The product app keeps a
   warmer feel — this layer is its more formal sibling. */

/* ---------- Typography ----------
   Inter Tight for UI/headlines (tighter, more corporate than DM Sans).
   Source Serif 4 for editorial pull-quotes and case-study moments.
   IBM Plex Mono for data, eyebrows, citations, and deck slide numbers. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --mh-font-sans:  'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mh-font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --mh-font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — denser, more typographic restraint */
  --mh-text-2xs: 11px;
  --mh-text-xs:  12px;
  --mh-text-sm:  13px;
  --mh-text-md:  15px;   /* body */
  --mh-text-lg:  17px;
  --mh-text-xl:  20px;
  --mh-text-2xl: 26px;
  --mh-text-3xl: 34px;
  --mh-text-4xl: 46px;
  --mh-text-5xl: 60px;
  --mh-text-6xl: 84px;

  --mh-leading-tight: 1.05;
  --mh-leading-snug:  1.2;
  --mh-leading-body:  1.55;
  --mh-leading-loose: 1.7;

  --mh-tracking-tight: -0.025em;
  --mh-tracking-snug:  -0.012em;
  --mh-tracking-normal: 0;
  --mh-tracking-wide:   0.08em;   /* eyebrows feel stricter when wider */

  /* ---------- Color ----------
     Forest is the new lead — deeper, more institutional than the bright
     leaf-green of the app. Used on dark surfaces and as a reserved accent.
     Ink is a true cool navy that pairs with forest and reads as authority.
     Consumer Leaf is preserved at 500/600 for cross-system continuity. */

  /* Forest — primary brand for B2B */
  --mh-forest-50:  #ECF3EE;
  --mh-forest-100: #D2E3D6;
  --mh-forest-200: #A4C5AD;
  --mh-forest-300: #6FA37C;
  --mh-forest-400: #3F7E54;
  --mh-forest-500: #1F5F38;     /* PRIMARY */
  --mh-forest-600: #154928;
  --mh-forest-700: #0D341C;
  --mh-forest-800: #082313;
  --mh-forest-900: #051710;

  /* Leaf — preserved from the app (logo continuity, charts, light accents) */
  --mh-leaf-300: #6FCE92;
  --mh-leaf-500: #2BA85C;
  --mh-leaf-600: #1F8E4A;

  /* Sky — secondary data accent, used in charts/diagrams */
  --mh-sky-200: #B8DCEC;
  --mh-sky-400: #4FA8CC;
  --mh-sky-600: #1F6E91;

  /* Sand — paper / report background warmth */
  --mh-sand-50:  #FAF7F2;
  --mh-sand-100: #F1ECE2;
  --mh-sand-200: #E3DAC6;

  /* Ink — text & surfaces, cool navy family */
  --mh-ink-950: #06101C;     /* near-black hero & section breaks */
  --mh-ink-900: #0B1A2C;     /* primary text */
  --mh-ink-800: #142539;
  --mh-ink-700: #25364C;
  --mh-ink-600: #3F5067;
  --mh-ink-500: #5C6B80;
  --mh-ink-400: #8493A4;
  --mh-ink-300: #B5BFCB;
  --mh-ink-200: #DCE2EA;     /* hairlines */
  --mh-ink-150: #E8ECF1;
  --mh-ink-100: #F1F3F7;
  --mh-ink-50:  #F7F8FA;
  --mh-white:   #FFFFFF;

  /* Status — desaturated, regulatory-friendly */
  --mh-success:    #1F5F38;
  --mh-success-bg: #E6EFE8;
  --mh-warning:    #8C5A00;
  --mh-warning-bg: #F6EDD8;
  --mh-danger:     #8C2A2A;
  --mh-danger-bg:  #F2E0E0;
  --mh-info:       #1F6E91;
  --mh-info-bg:    #E0EDF3;

  /* Semantic aliases */
  --mh-bg:            var(--mh-white);
  --mh-bg-alt:        var(--mh-ink-50);
  --mh-bg-paper:      var(--mh-sand-50);
  --mh-bg-deep:       var(--mh-ink-950);
  --mh-surface:       var(--mh-white);
  --mh-surface-alt:   var(--mh-ink-50);
  --mh-border:        var(--mh-ink-200);
  --mh-border-strong: var(--mh-ink-300);
  --mh-rule:          var(--mh-ink-900);   /* heavy editorial rules */
  --mh-text:          var(--mh-ink-900);
  --mh-text-muted:    var(--mh-ink-500);
  --mh-text-subtle:   var(--mh-ink-400);
  --mh-primary:       var(--mh-forest-500);
  --mh-primary-hover: var(--mh-forest-600);
  --mh-on-primary:    var(--mh-white);
  --mh-accent:        var(--mh-forest-500);

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

  /* ---------- Radius ----------
     Enterprise = restraint. No pills outside of small status chips.
     Cards and surfaces are 4–8px max; many elements are square. */
  --mh-radius-none: 0px;
  --mh-radius-xs:  2px;
  --mh-radius-sm:  4px;     /* default */
  --mh-radius-md:  6px;     /* cards */
  --mh-radius-lg:  8px;     /* large containers */
  --mh-radius-pill: 999px;  /* small chips & status only */

  /* ---------- Shadow ----------
     Used sparingly. Most depth comes from rules and tone shifts, not shadow. */
  --mh-shadow-xs: 0 1px 2px rgba(11, 26, 44, 0.04);
  --mh-shadow-sm: 0 1px 3px rgba(11, 26, 44, 0.06), 0 1px 2px rgba(11, 26, 44, 0.04);
  --mh-shadow-md: 0 4px 12px rgba(11, 26, 44, 0.08);
  --mh-shadow-lg: 0 12px 32px rgba(11, 26, 44, 0.10);
  --mh-shadow-ring: 0 0 0 3px rgba(31, 95, 56, 0.20);

  /* ---------- Motion ---------- */
  --mh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mh-dur-fast: 100ms;
  --mh-dur-base: 180ms;
  --mh-dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --mh-content-narrow: 640px;
  --mh-content-text:   720px;
  --mh-content-wide:   1120px;
  --mh-content-max:    1320px;

  /* ---------- Editorial rules ---------- */
  --mh-rule-thin:   1px;
  --mh-rule-medium: 2px;
  --mh-rule-thick:  4px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--mh-font-sans);
  font-size: var(--mh-text-md);
  line-height: var(--mh-leading-body);
  color: var(--mh-text);
  background: var(--mh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* ---------- Type primitives ---------- */
.mh-display {
  font-family: var(--mh-font-sans);
  font-weight: 500;
  font-size: var(--mh-text-6xl);
  line-height: var(--mh-leading-tight);
  letter-spacing: var(--mh-tracking-tight);
}
.mh-h1 { font-weight: 500; font-size: var(--mh-text-5xl); line-height: var(--mh-leading-tight); letter-spacing: var(--mh-tracking-tight); }
.mh-h2 { font-weight: 500; font-size: var(--mh-text-3xl); line-height: var(--mh-leading-snug); letter-spacing: var(--mh-tracking-snug); }
.mh-h3 { font-weight: 600; font-size: var(--mh-text-2xl); line-height: var(--mh-leading-snug); letter-spacing: var(--mh-tracking-snug); }
.mh-h4 { font-weight: 600; font-size: var(--mh-text-xl); line-height: var(--mh-leading-snug); }

.mh-eyebrow {
  font-family: var(--mh-font-mono);
  font-size: var(--mh-text-xs);
  font-weight: 500;
  letter-spacing: var(--mh-tracking-wide);
  text-transform: uppercase;
  color: var(--mh-forest-600);
}
.mh-eyebrow.dark { color: var(--mh-forest-300); }

.mh-lede {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-body);
  color: var(--mh-ink-700);
}
.mh-body  { font-size: var(--mh-text-md); line-height: var(--mh-leading-body); }
.mh-small { font-size: var(--mh-text-sm); line-height: var(--mh-leading-body); color: var(--mh-text-muted); }
.mh-caption { font-size: var(--mh-text-xs); color: var(--mh-text-muted); }
.mh-mono { font-family: var(--mh-font-mono); }
.mh-serif { font-family: var(--mh-font-serif); }

/* Editorial pull quote */
.mh-pullquote {
  font-family: var(--mh-font-serif);
  font-weight: 500;
  font-size: var(--mh-text-3xl);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--mh-ink-900);
}

/* ---------- Buttons ----------
   No pills. Square 4px corners. Quiet, deliberate. */
.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--mh-radius-sm);
  font-family: inherit;
  font-size: var(--mh-text-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--mh-dur-fast) var(--mh-ease),
              color var(--mh-dur-fast) var(--mh-ease),
              border-color var(--mh-dur-fast) var(--mh-ease);
  text-decoration: none;
  white-space: nowrap;
}
.mh-btn:focus-visible { outline: none; box-shadow: var(--mh-shadow-ring); }

.mh-btn-primary { background: var(--mh-ink-900); color: var(--mh-white); }
.mh-btn-primary:hover { background: var(--mh-ink-800); }

.mh-btn-accent  { background: var(--mh-forest-500); color: var(--mh-white); }
.mh-btn-accent:hover { background: var(--mh-forest-600); }

.mh-btn-secondary {
  background: var(--mh-white);
  color: var(--mh-ink-900);
  border-color: var(--mh-ink-300);
}
.mh-btn-secondary:hover { border-color: var(--mh-ink-900); }

.mh-btn-ghost { background: transparent; color: var(--mh-ink-900); padding: 11px 12px; }
.mh-btn-ghost:hover { background: var(--mh-ink-100); }

.mh-btn-sm { padding: 8px 14px; font-size: var(--mh-text-xs); }
.mh-btn-lg { padding: 14px 24px; font-size: var(--mh-text-md); }

.mh-btn .mh-arrow { transition: transform var(--mh-dur-fast) var(--mh-ease); }
.mh-btn:hover .mh-arrow { transform: translateX(2px); }

/* ---------- Inputs ---------- */
.mh-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--mh-radius-sm);
  border: 1px solid var(--mh-ink-300);
  background: var(--mh-white);
  font-family: inherit;
  font-size: var(--mh-text-md);
  color: var(--mh-text);
  transition: border-color var(--mh-dur-fast) var(--mh-ease),
              box-shadow var(--mh-dur-fast) var(--mh-ease);
}
.mh-input::placeholder { color: var(--mh-ink-400); }
.mh-input:focus {
  outline: none;
  border-color: var(--mh-forest-500);
  box-shadow: var(--mh-shadow-ring);
}

/* ---------- Card ---------- */
.mh-card {
  background: var(--mh-white);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-md);
  padding: var(--mh-space-6);
}

/* ---------- Badge / chip ----------
   Pill is OK here at small sizes — it reads as "tag", not "button". */
.mh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--mh-radius-pill);
  font-size: var(--mh-text-xs);
  font-weight: 500;
  font-family: var(--mh-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--mh-forest-50);
  color: var(--mh-forest-700);
  border: 1px solid var(--mh-forest-100);
}
.mh-badge-info    { background: var(--mh-info-bg);    color: var(--mh-info);    border-color: transparent; }
.mh-badge-warning { background: var(--mh-warning-bg); color: var(--mh-warning); border-color: transparent; }
.mh-badge-danger  { background: var(--mh-danger-bg);  color: var(--mh-danger);  border-color: transparent; }
.mh-badge-neutral { background: var(--mh-ink-100);    color: var(--mh-ink-700); border-color: transparent; }
.mh-badge-outline { background: transparent;          color: var(--mh-ink-700); border-color: var(--mh-ink-300); }