/* ===========================================================================
   Baltic Dental — Base layer
   Light reset + documented utility classes (pills, cyan utilities).
   Component primitives live as React in /components — these classes exist so
   raw-HTML surfaces can still speak the brand.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--text-heading); font-weight: var(--w-bold); line-height: var(--lh-snug); margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--bd-mint-soft); color: var(--fg-1); }

/* --- Pills: soft tinted status capsules via color-mix --- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: var(--w-medium);
  line-height: 1; white-space: nowrap;
}
.pill-mint  { background: var(--bd-mint-soft); color: var(--bd-mint-deep); }
.pill-blue  { background: var(--bd-blue-soft); color: var(--bd-blue); }
.pill-green { background: var(--success-soft); color: color-mix(in srgb, var(--success) 70%, black); }
.pill-amber { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 65%, black); }
.pill-red   { background: var(--danger-soft);  color: color-mix(in srgb, var(--danger) 70%, black); }
.pill-slate { background: var(--bg-3); color: var(--fg-2); }

/* --- Cyan utilities --- */
.cyan-border { border: 1px solid color-mix(in srgb, var(--bd-mint) 55%, var(--border-2)); }
.cyan-tint   { background: var(--tint-cyan); }
.cyan-text   { color: var(--bd-mint-deep); }
.cyan-glow   { box-shadow: var(--shadow-cyan-glow); }
.cyan-fill   { background: var(--bd-mint); color: var(--fg-on-accent); }