/* DentalVoice design system — modern B2B SaaS
   Self-hosted (no external CDN), works with Tailwind Play CDN.
   Overrides: brand tokens, component polish, motion. */

:root {
  --brand: #0284c7;
  --brand-dark: #0369a1;
  --brand-ink: #0f172a;
  --surface: #ffffff;
  --muted: #64748b;
  --line: #e2e8f0;
  --soft: #f8fafc;
  --brand-glow: rgba(2, 132, 199, 0.14);
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.12);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Brand surface helpers ---------- */
.bg-brand-soft { background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%); }
.bg-brand-mesh {
  background:
    radial-gradient(60rem 32rem at 15% -10%, rgba(2,132,199,0.16), transparent 60%),
    radial-gradient(50rem 30rem at 90% -10%, rgba(56,189,248,0.18), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.bg-brand-glow { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 55%, #22d3ee 100%); }
.text-brand-gradient {
  background: linear-gradient(120deg, #0284c7 0%, #38bdf8 60%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
  border-color: rgba(2,132,199,0.35);
}
.card-ring { box-shadow: 0 0 0 1px rgba(2,132,199,0.35), var(--shadow-card); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .75rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem;
  padding: .625rem 1.25rem; transition: all .15s ease; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(2,132,199,0.3); }
.btn-primary:hover { background: var(--brand-dark); box-shadow: 0 6px 16px rgba(2,132,199,0.4); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--brand-ink); border-color: var(--line); }
.btn-ghost:hover { border-color: rgba(2,132,199,0.5); color: var(--brand-dark); background: rgba(2,132,199,0.04); }
.btn-white { background: #fff; color: var(--brand-dark); box-shadow: 0 4px 14px rgba(15,23,42,0.18); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,0.22); }

/* ---------- Forms ---------- */
.field {
  width: 100%; border: 1px solid var(--line); border-radius: .75rem;
  padding: .625rem .875rem; font-size: .875rem; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease; outline: none;
}
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise .5s cubic-bezier(.22,.61,.36,1) both; }
.rise-1 { animation-delay: .06s; } .rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .18s; } .rise-4 { animation-delay: .24s; }

@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pulse-soft { animation: pulse-soft 2.2s ease-in-out infinite; }

@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 800px 100%; animation: shimmer 1.4s linear infinite;
  border-radius: .5rem;
}

/* ---------- Glass ---------- */
.glass {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,232,240,0.7);
}

/* ---------- Misc ---------- */
.tooth-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  background: var(--brand-glow); color: var(--brand);
}
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 600; padding: .25rem .625rem;
  border-radius: 9999px; background: rgba(2,132,199,0.08); color: var(--brand-dark);
}
.divider-grad { height: 1px; background: linear-gradient(90deg, transparent, rgba(2,132,199,0.35), transparent); }

@media (prefers-reduced-motion: reduce) {
  .rise, .pulse-soft, .skeleton { animation: none; }
  * { transition-duration: .01ms !important; }
}