/* Figma-derived primitives. Source evidence and responsive decisions: docs/design-system.md. */
@font-face { font-family: Onest; font-style: normal; font-weight: 100; font-display: swap; src: url('../shell/onest-100.ttf') format('truetype'); }
@font-face { font-family: Onest; font-style: normal; font-weight: 400; font-display: swap; src: url('../shell/onest-400.ttf') format('truetype'); }
@font-face { font-family: Onest; font-style: normal; font-weight: 500; font-display: swap; src: url('../shell/onest-500.ttf') format('truetype'); }
@font-face { font-family: Onest; font-style: normal; font-weight: 600; font-display: swap; src: url('../shell/onest-600.ttf') format('truetype'); }
@font-face { font-family: Onest; font-style: normal; font-weight: 700; font-display: swap; src: url('../shell/onest-700.ttf') format('truetype'); }

:root {
  --shadow-curtain: 0 0 32px 6px rgb(35 31 32 / 18%);
  --motion-press: 120ms;
  --motion-hover: 180ms;
  --motion-ui: 220ms;
  --motion-reveal: 700ms;
  --motion-picture: 1000ms;
  --motion-stagger: 80ms;
  --motion-distance: 20px;
  --motion-picture-scale: 1.04;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --color-outline: #f1e7ea;
  --shadow-card: 0 12px 24px -10px rgb(0 0 0 / 10%);
  --text-section-body: var(--text-small);
  --color-ink: #231f20;
  --color-reviews: #1a1a1a;
  --color-pink: #f27ca1;
  --color-pink-shade: #5b0620;
  --color-paper: #fdfbfc;
  --color-white: #ffffff;
  --color-muted: #c9c9c9;
  --color-subtle: #8e8e93;
  --color-notice: #fff3f6;
  --color-pink-faint: rgb(242 124 161 / 8%);
  --color-pink-wash: rgb(242 124 161 / 7%);
  --color-pink-tint: rgb(242 124 161 / 15%);
  --color-pink-overlay: rgb(242 124 161 / 30%);
  --color-text-secondary: #6b7280;
  --color-reading: #4e4e4e;
  --color-pink-strong: #ff74a0;
  --color-pink-light: #ff9aba;
  --color-input-border: #3a3a3a;
  --color-placeholder: #8c8c8c;
  /* Accessible interaction colors derived from the brand palette. */
  --color-focus: #b63161;
  --color-focus-inverse: #ffc2d8;
  --color-action-text: #9e2954;
  --color-placeholder-readable: #666666;
  --color-pink-soft: #fbe6ee;
  --color-promotion: rgb(255 116 160 / 10%);
  --color-pink-hover: #ffa7c4;
  --color-surface-hover: #fce8ef;
  --color-dark-hover: #4d373f;
  --font-body: Onest, system-ui, sans-serif;
  --font-weight-thin: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-metric: 40px;
  --text-number-small: 32px;
  --text-card-title-small: 18px;
  --text-accordion: 22px;
  --text-reading-small: 15px;
  --leading-number-small: 41px;
  --leading-number-medium: 51px;
  --leading-number-large: 71px;
  --leading-metric: 61px;
  --leading-narrative: 26px;
  --leading-card-copy: 22px;
  --leading-card-title-small: 23px;
  --leading-feature-title: 29px;
  --leading-caption-short: 17px;
  --text-cta: 38px;
  --leading-cta: 44px;
  --text-number: 3.5rem; /* 56px, decorative indication numbers */
  --text-caption: 0.75rem; /* 12px, doctor card specialty */
  --text-card-name: 0.875rem; /* 14px, doctor card name */
  --leading-compact: 1rem;
  --text-micro: 0.6875rem; /* 11px */
  --text-small: 0.8125rem; /* 13px */
  --text-base: 1rem; /* 16px */
  --text-h6: 1.1875rem; /* 19px */
  --text-h5: 1.4375rem; /* 23px */
  --text-h4: 1.75rem; /* 28px */
  --text-h3: 2.0625rem; /* 33px */
  --text-title: 2.5rem; /* 40px */
  --text-display: 3rem; /* 48px */
  --leading-micro: 1.25rem;
  --leading-body: 1.5rem;
  --leading-h6: 2rem;
  --leading-h5: 2.25rem;
  --leading-h4: 2.5rem;
  --leading-h3: 3rem;
  --leading-title: 3.5rem;
  --leading-display: 4rem;
  --leading-display-tight: 1.1;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 56px;
  --space-13: 64px;
  --space-14: 72px;
  --space-15: 80px;
  --radius-input: 12px;
  --radius-card: 20px;
  --radius-hero: 40px;
  --radius-promotion: 32px;
  --radius-map: 24px;
  --radius-pill: 100px;
  --radius-circle: 50%;
  --content-width: 1112px;
  --page-gutter: 20px;
  --section-space: var(--space-11);
  --touch-target: 44px;
  --button-height: 48px;
}

/* Mobile headings use smaller steps from the same Figma type scale. */
@media (max-width: 767px) {
  :root {
    --text-section-body: var(--text-base);
    --text-title: var(--text-h4);
    --text-display: var(--text-h3);
    --leading-title: var(--leading-h4);
    --leading-display: var(--leading-h3);
  }
}