/*
 * CalaPet typography system
 *
 * A readable iPhone-first scale. Keep display hierarchy in headings and values;
 * don't manufacture hierarchy by making every control bold.
 */
:root {
  --type-body: 17px;
  --type-callout: 16px;
  --type-secondary: 15px;
  --type-caption: 13px;
  --type-micro: 12px;
  --weight-regular: 450;
  --weight-control: 500;
  --weight-emphasis: 600;
  --weight-heading: 650;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-heading);
}

strong, b {
  font-weight: var(--weight-emphasis);
}

button,
input,
select,
textarea {
  font-weight: var(--weight-control);
}

input,
select,
textarea {
  font-size: 16px;
}

.onboarding-photo-button {
  font-size: var(--type-secondary);
  font-weight: var(--weight-control);
}

.module-choice-copy strong {
  font-size: var(--type-caption);
  font-weight: var(--weight-control);
}

.module-choice-copy small {
  font-size: var(--type-micro);
  font-weight: var(--weight-regular);
  letter-spacing: .01em;
}

/* Primary and secondary controls: readable without looking heavy. */
:is(
  .primary-button,
  .secondary-button,
  .text-button,
  .guided-primary-button,
  .guided-secondary-button,
  .saved-close-button,
  .settings-save-button,
  .settings-destructive-button,
  .cloud-account-actions button,
  .cloud-account-secondary,
  .saved-confirmation-actions button,
  .saved-inline-actions button,
  .home-priority-alert-actions button,
  .home-deferred-item button,
  .notification-row-actions button,
  .visit-add-grid button,
  .visit-context-row > button,
  .visit-clinic-editor-actions button,
  .visit-notes-disclosure summary
) {
  font-size: var(--type-secondary);
  font-weight: var(--weight-control);
}

/* Supporting copy that is read as part of the task, not decorative chrome. */
:is(
  .field-help,
  .form-field-label,
  .settings-footnote,
  .settings-toggle-row small,
  .settings-native-link small,
  .profile-action-list small,
  .profile-passport-facts span,
  .profile-setup-progress-card small,
  .profile-setup-group small,
  .onboarding-profile-note,
  .onboarding-access-preview p,
  .onboarding-access-preview small,
  .home-today-copy small,
  .home-today-meta,
  .home-priority-status,
  .home-priority-queue-count,
  .home-deferred-item > span small,
  .home-next-card time,
  .record-date,
  .weight-record-card time,
  .weight-record-notes,
  .weight-change,
  .weight-current-card > p,
  .weight-current-card > span,
  .document-card-copy > p,
  .document-card-copy > small,
  .document-page-title p,
  .document-page-title span,
  .document-viewer-heading p,
  .document-viewer-heading div > span,
  .global-search-result-copy small,
  .global-search-result-copy span,
  .global-search-result time,
  .notification-row-copy small,
  .notification-row-copy time,
  .notification-row-pet-name,
  .notification-row-pet-context,
  .notification-row-when strong,
  .notification-row-when small,
  .notification-row-state,
  .history-episode-item small,
  .history-day-marker time,
  .history-episode-date,
  .deworming-history-copy > p,
  .deworming-history-copy > time,
  .deworming-schedule-copy small,
  .health-medication-copy p,
  .health-medication-schedule,
  .health-treatment-header-copy p,
  .health-treatment-header-copy > span,
  .medication-course-summary small,
  .medication-course-summary span,
  .medication-course-progress > small,
  .vaccines-page .vaccine-overview p,
  .vaccines-page .upcoming-vaccine-card p,
  .vaccines-page .vaccine-priority-row > div > span,
  .vaccines-page .vaccine-disease-row > div > span,
  .vaccines-page .vaccine-history-native-body > p,
  .vaccines-page .vaccine-history-native-top time,
  .vaccines-page .vaccine-disease-row > small,
  .visit-draft-item small,
  .visit-empty-state span,
  .visit-flow-heading > div > span,
  .visit-item-heading div span,
  .visit-result-item small,
  .visit-result-visit small,
  .visit-result-visit > span
) {
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1.42;
}

/* Compact chips and badges can be smaller, but never microscopic. */
:is(
  .tag,
  .filter-chip,
  .status-pill,
  .region-pill,
  .deworming-kind-tag,
  .document-file-badge,
  .document-card-tags > span,
  .vaccine-coverage-chips > span,
  .vaccines-page .vaccine-coverage-chips > span,
  .vaccines-page .vaccine-state-summary span,
  .current-badge,
  .weight-page .current-badge,
  .cloud-account-status,
  .quick-alert-badge,
  .notification-badge
) {
  font-size: var(--type-micro);
  font-weight: var(--weight-emphasis);
  line-height: 1.2;
}

/* Navigation and selectors stay compact, while remaining comfortably legible. */
:is(
  .nav-item span:last-child,
  .nav-main .nav-item span:last-child,
  .global-search-pets button,
  .notification-pet-filter strong,
  .weight-sort-control select,
  .weight-chart-range button,
  .weight-records-toggle,
  .vaccine-status-tab span,
  .document-category-overview > button
) {
  font-size: var(--type-caption);
  font-weight: var(--weight-control);
}

/* Short all-caps labels need tracking more than weight. */
:is(
  .eyebrow,
  .pet-switcher-copy > span,
  .reminder-section-label,
  .date-badge span,
  .medication-card-kicker,
  .weight-current-card > span,
  .home-today-kicker,
  .home-today-row > span,
  .home-today-row > time,
  .settings-section h2,
  .vaccines-page .vaccine-history-month-title,
  .vaccines-page .vaccine-disease-date-heading,
  .history-month-group > h2,
  .history-day-marker time,
  .record-date,
  .onboarding-step-heading > span,
  .reference-sources > strong
) {
  font-size: var(--type-micro);
  font-weight: var(--weight-emphasis);
  letter-spacing: .085em;
  line-height: 1.35;
}

/* Page and section headings use one calm, repeatable weight. */
:is(
  .page-heading h1,
  .global-search-page > h1,
  .document-page-title h1,
  .expense-page-title h1,
  .health-treatment-header-copy h1,
  .home-page .section-heading h2,
  .home-page .quick-section > h2,
  .home-page .record-section > h2,
  .home-page .history-card h2
) {
  font-weight: var(--weight-heading);
}

.home-cover-greeting {
  font-weight: var(--weight-control);
}

/* Global animal selector: names are real controls, not captions. */
.animal-scope-name {
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1.3;
}

/* Dates group content but shouldn't shout or become hard to read. */
.history-agenda-day > h3,
.global-search-date-group > h3 {
  font-size: var(--type-caption);
  font-weight: var(--weight-control);
  letter-spacing: .01em;
  line-height: 1.35;
}

/* Quick-card metadata remains useful at a glance. */
.home-page .quick-card span:last-child {
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1.35;
}

.home-page .quick-alert-badge {
  font-size: var(--type-micro);
  font-weight: var(--weight-emphasis);
}

/* Vaccine reference and decisions contain meaningful health information. */
.vaccines-page :is(
  .health-add-medication-label,
  .vaccine-decision-button,
  .vaccine-reference-intro,
  .clinical-disclaimer,
  .reference-source-note
) {
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1.45;
}

.vaccines-page :is(
  .vaccine-priority-row,
  .vaccine-disease-row,
  .vaccine-reference-card
) .vaccine-coverage-chips > span,
.vaccines-page .vaccine-reference-card :is(dt, dd, p, small) {
  font-size: var(--type-caption);
  line-height: 1.42;
}

.vaccines-page .vaccine-reference-card dt {
  font-weight: var(--weight-emphasis);
}

.vaccines-page .vaccine-reference-card dd {
  font-weight: var(--weight-regular);
}

.vaccines-page .health-add-medication-label {
  font-weight: var(--weight-control);
}

.vaccines-page .vaccine-tab-attention {
  font-size: var(--type-micro);
  font-weight: var(--weight-control);
}

/* Remove the most common sources of accidental heavy UI copy. */
:is(
  .settings-toggle-row strong,
  .settings-native-link strong,
  .global-search-result-copy strong,
  .home-deferred-item > span strong,
  .profile-setup-group strong,
  .visit-draft-item strong,
  .history-episode-item strong,
  .document-card-copy strong,
  .health-medication-copy strong,
  .vaccines-page .vaccine-priority-row strong,
  .vaccines-page .vaccine-disease-row strong
) {
  font-weight: var(--weight-emphasis);
}

@media (max-width: 430px) {
  /* Mobile overrides elsewhere must not shrink meaningful text back to 8–10px. */
  .vaccines-page .vaccine-disease-row > small,
  .vaccines-page .vaccine-disease-date-heading,
  .vaccines-page .vaccine-priority-row .text-button,
  .vaccines-page .vaccine-disease-row .text-button {
    font-size: var(--type-caption);
  }
}