/* DocMedicano shared visual system: navy, teal, cyan, mint on white. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2")}
:root {
  --dm-page-bg: #f3f8fc;
  --dm-surface: #ffffff;
  --dm-text: #172b4d;
  --dm-text-soft: #526174;
  --dm-border: #e1ecf7;
  --dm-border-teal: #bfe3dd;
  --dm-navy: #0f2c69;
  --dm-teal: #00685f;
  --dm-teal-brand: #00897b;
  --dm-cyan: #00b4d8;
  --dm-mint: #f3f8fc;
  --dm-mint-light: #f3f8fc;
  --dm-radius: 16px;
  --dm-shadow: 0 1px 2px rgba(15, 44, 105, .05), 0 6px 18px rgba(15, 44, 105, .06);
  --dm-shadow-hover: 0 2px 4px rgba(15, 44, 105, .06), 0 14px 30px rgba(15, 44, 105, .10);
  --dm-teal-cyan: linear-gradient(110deg, #00685f, #00897b 55%, #00b4d8);
  --dm-white-mint: linear-gradient(180deg, #ffffff, #f3f8fc);
}

html { scroll-padding-top: 96px; }
:where([id]) { scroll-margin-top: 96px; }

html body { background-color: var(--dm-page-bg); color: var(--dm-text); }
:where(h1, h2, h3, h4) { color: var(--dm-navy); letter-spacing: -0.01em; }
:where(p, li) { line-height: 1.65; }
:where(p) { overflow-wrap: break-word; }
:where(h1, h2, h3, h4, a, button, label) { overflow-wrap: break-word; }

/* Soft section backgrounds: subtle mint wash instead of flat grey. */
html body .bg-slate-50, html body .bg-surface, html body .bg-brand-surface { background-color: var(--dm-page-bg); }
html body .bg-brand-teal-light { background-color: var(--dm-mint); }

/* Cards: white, thin teal-tinted border, restrained shadow. */
html body main .bg-white.rounded-2xl,
html body main .bg-white.rounded-xl,
html body main .bg-white.rounded-3xl,
html body main article.bg-white,
html body main .card {
  border-color: var(--dm-border);
  border-radius: var(--dm-radius);
  box-shadow: var(--dm-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html body main .bg-white.rounded-2xl:hover,
html body main .bg-white.rounded-xl:hover,
html body main .bg-white.rounded-3xl:hover,
html body main article.bg-white:hover,
html body main .bg-white.rounded-2xl:focus-within,
html body main .bg-white.rounded-xl:focus-within,
html body main .bg-white.rounded-3xl:focus-within,
html body main article.bg-white:focus-within {
  border-color: var(--dm-border-teal);
  box-shadow: var(--dm-shadow-hover);
  transform: translateY(-2px);
}

/* Featured card: teal-to-cyan border without changing its content. */
.dm-featured {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--dm-radius);
  background: linear-gradient(#fff, #fff) padding-box, var(--dm-teal-cyan) border-box;
  box-shadow: var(--dm-shadow-hover);
}

/* Primary actions: solid teal with white text (6.6:1 contrast). */
html body .bg-brand-teal, html body .bg-primary-container { background-color: var(--dm-teal); }
html body .hover\:bg-brand-teal-dark:hover, html body .hover\:bg-brand-teal:hover { background-color: #004d46; }
html body .text-brand-teal { color: var(--dm-teal); }
html body .border-brand-teal { border-color: var(--dm-teal-brand); }
a, button { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }

/* Forms: readable labels, neutral borders, strong focus. */
:where(label) { color: var(--dm-text); font-weight: 600; }
:where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  border-color: #e1ecf7;
  border-radius: 10px;
  background-color: #fff;
  color: var(--dm-text);
}
:where(input, select, textarea)::placeholder { color: #6b7a8c; }
:where(input, select, textarea):hover { border-color: #9db8b8; }
[aria-invalid="true"] { border-color: #b3261e !important; }

/* Keyboard focus is always visible and matches hover affordances. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dm-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0, 180, 216, .18);
}

/* Footer: clear grouping and readable links. */
footer a { text-underline-offset: 3px; }
footer a:hover { text-decoration: underline; }

/* Lightweight loading placeholder for any element given .dm-skeleton. */
.dm-skeleton {
  background: linear-gradient(90deg, #f3f8fc 25%, #f3f8fc 50%, #f3f8fc 75%);
  background-size: 200% 100%;
  animation: dm-skeleton 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes dm-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Prevent overflow from long strings in cards and tables. */
img, svg, video { max-width: 100%; }
:where(table) { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html body main .bg-white.rounded-2xl:hover, html body main .bg-white.rounded-xl:hover,
  html body main .bg-white.rounded-3xl:hover, html body main article.bg-white:hover { transform: none; }
}
