/* ============================================================
   TBM Home Care — Colors & Type
   Updated, modern, calm-medical brand foundation.
   Brand colors are anchored to the logo:
     #14bcce  cyan       — primary, trust, clinical
     #65bf7f  green      — accent, care, growth
     #ffffff  white      — base, clean surface
   ============================================================ */

/* ---- Fonts: Nunito (rounded, friendly) + Inter (UI / body) ---- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand ---------- */
  --tbm-cyan-500: #14bcce;     /* primary */
  --tbm-cyan-600: #0fa6b7;     /* hover */
  --tbm-cyan-700: #0c8a98;     /* press / dark accent */
  --tbm-cyan-100: #d6f4f8;     /* tint surface */
  --tbm-cyan-50:  #ecfafc;     /* lightest tint */

  --tbm-green-500: #65bf7f;    /* accent */
  --tbm-green-600: #4ea868;    /* hover */
  --tbm-green-700: #3d8a55;    /* dark accent */
  --tbm-green-100: #dff3e5;    /* tint surface */
  --tbm-green-50:  #eef9f1;    /* lightest tint */

  /* ---------- Neutrals (warm gray, not cold) ---------- */
  --tbm-ink:        #0f2a32;   /* deep teal-ink — primary text */
  --tbm-ink-2:      #2a4a52;   /* secondary text */
  --tbm-ink-3:      #5a7077;   /* tertiary / captions */
  --tbm-ink-4:      #8a9aa0;   /* disabled / placeholders */
  --tbm-line:       #e3ebed;   /* hairline borders */
  --tbm-line-2:     #eef3f4;   /* softer dividers */
  --tbm-surface:    #f7fafb;   /* page background tint */
  --tbm-surface-2:  #ffffff;   /* cards / elevated */
  --tbm-white:      #ffffff;

  /* ---------- Semantic ---------- */
  --tbm-success: #65bf7f;
  --tbm-info:    #14bcce;
  --tbm-warn:    #f0b54a;
  --tbm-danger:  #e26d6d;

  /* ---------- Foreground / background tokens ---------- */
  --fg-1: var(--tbm-ink);
  --fg-2: var(--tbm-ink-2);
  --fg-3: var(--tbm-ink-3);
  --fg-on-brand: #ffffff;

  --bg-1: var(--tbm-surface);
  --bg-2: var(--tbm-surface-2);
  --bg-brand: var(--tbm-cyan-500);
  --bg-accent: var(--tbm-green-500);

  /* ---------- Type families ---------- */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type scale (modular, friendly) ---------- */
  --fs-display: clamp(48px, 6vw, 72px);
  --fs-h1: clamp(36px, 4.5vw, 52px);
  --fs-h2: clamp(28px, 3vw, 38px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

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

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(15, 42, 50, .06), 0 1px 1px rgba(15, 42, 50, .04);
  --shadow-2: 0 4px 12px rgba(15, 42, 50, .08), 0 1px 2px rgba(15, 42, 50, .04);
  --shadow-3: 0 12px 32px rgba(15, 42, 50, .10), 0 2px 6px rgba(15, 42, 50, .05);
  --shadow-brand: 0 12px 28px rgba(20, 188, 206, .28);
  --shadow-accent: 0 12px 28px rgba(101, 191, 127, .28);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Semantic element styles — opt-in via .tbm-prose or root use
   ============================================================ */

.tbm-prose, body.tbm {
  font-family: var(--font-body);
  color: var(--fg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  background: var(--bg-1);
}

.tbm-prose h1, .tbm-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}

.tbm-prose h2, .tbm-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: balance;
}

.tbm-prose h3, .tbm-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.tbm-prose h4, .tbm-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.tbm-prose p, .tbm-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.tbm-lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.tbm-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tbm-cyan-700);
}

.tbm-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.tbm-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}

/* Links */
.tbm-prose a, a.tbm-link {
  color: var(--tbm-cyan-600);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--tbm-cyan-500) 35%, transparent);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tbm-prose a:hover, a.tbm-link:hover {
  color: var(--tbm-cyan-700);
  border-bottom-color: var(--tbm-cyan-600);
}