/*
 * healthmeddat.com — design tokens v1.0, 2026-10-16.
 * Read docs/design-system.md before changing these values.
 * PNG colors and explicit type scales are the reference baseline.
 * Font family is intentionally unresolved by the owner's decision.
 * Geometry, gradient reconstruction and missing states are provisional.
 * Reference accent/white combinations have known contrast issues; see docs.
 */

:root {
  /* Palette sampled from reference 07. */
  --color-ink: #141414;
  --color-gray: #4F4F4F;
  --color-muted: #7F8D94;
  --color-primary: #00578A;
  --color-blue: #017CC1;
  --color-turquoise: #00C6BF;
  --color-turquoise-light: #7CE4E1;
  --color-orange: #F25A2A;
  --color-blue-light: #E3EFF5;

  /* Component surfaces and interaction colors sampled from references. */
  --color-white: #FFFFFF;
  --color-surface-soft: #F0F6F9;
  --color-primary-hover: #0070B1;
  --color-secondary-hover: #D5E9F3;
  --color-turquoise-hover: #00E1DA;
  --color-arrow-surface: #EAF6FF;

  /* Approximate reconstruction, not original gradient stops. */
  --gradient-start: #01AEC5;
  --gradient-end: #0077B8;
  --gradient-brand: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);

  /* Shared semantic roles. */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-gray);
  --text-muted: var(--color-muted);
  --text-inverse: var(--color-white);
  --surface-page: var(--color-white);
  --surface-soft: var(--color-surface-soft);
  --surface-brand: var(--color-primary);
  --link-color: var(--color-blue);
  --link-hover-color: var(--color-primary);

  --button-primary-bg: var(--color-primary);
  --button-primary-hover-bg: var(--color-primary-hover);
  --button-primary-active-bg: var(--color-primary);
  --button-primary-text: var(--color-white);
  --button-secondary-bg: var(--color-blue-light);
  --button-secondary-hover-bg: var(--color-secondary-hover);
  --button-secondary-active-bg: var(--color-blue-light);
  --button-secondary-text: var(--color-primary);
  --button-accent-bg: var(--color-turquoise);
  --button-accent-hover-bg: var(--color-turquoise-hover);
  --button-accent-active-bg: var(--color-turquoise);
  /* Reference value: requires contrast correction before production use. */
  --button-accent-text: var(--color-white);
  --button-outline-bg: var(--color-white);
  --button-outline-hover-bg: var(--color-surface-soft);
  --button-outline-text: var(--color-blue);
  --button-outline-border: var(--color-blue);
  --arrow-bg: var(--color-arrow-surface);
  --arrow-text: var(--color-blue);
  --arrow-hover-bg: var(--color-blue);
  --arrow-hover-text: var(--color-white);
  --nav-text: var(--color-ink);
  --nav-hover-text: var(--color-blue);
  --nav-open-text: var(--color-blue);
  --search-bg: var(--color-surface-soft);
  --search-accent: var(--color-turquoise);
  --phone-color: var(--color-primary);
  --phone-hover-color: var(--color-blue);
  --doctor-name-color: var(--color-blue);
  --doctor-name-hover-color: var(--color-turquoise);
  --document-caption-color: var(--color-gray);
  --document-caption-hover-color: var(--color-blue);

  /* Unresolved font: this is a temporary technical fallback only. */
  --font-family-base: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Explicit sizes / line heights from reference 01, at 16px root size. */
  --font-size-60: 3.75rem;
  --font-size-48: 3rem;
  --font-size-32: 2rem;
  --font-size-28: 1.75rem;
  --font-size-22: 1.375rem;
  --font-size-20: 1.25rem;
  --font-size-18: 1.125rem;
  --font-size-16: 1rem;
  --font-size-14: 0.875rem;
  --line-height-60-60: 3.75rem;
  --line-height-48-48: 3rem;
  --line-height-32-40: 2.5rem;
  --line-height-28-38: 2.375rem;
  --line-height-22-22: 1.375rem;
  --line-height-20-28: 1.75rem;
  --line-height-20-30: 1.875rem;
  --line-height-18-28: 1.75rem;
  --line-height-16-22: 1.375rem;
  --line-height-14-18: 1.125rem;

  /* Provisional typography role mapping; exact scales above stay fixed. */
  --heading-page-size: var(--font-size-60);
  --heading-page-line-height: var(--line-height-60-60);
  --heading-page-compact-size: var(--font-size-32);
  --heading-page-compact-line-height: var(--line-height-32-40);
  --heading-section-size: var(--font-size-48);
  --heading-section-line-height: var(--line-height-48-48);
  --heading-section-compact-size: var(--font-size-28);
  --heading-section-compact-line-height: var(--line-height-28-38);
  --heading-card-size: var(--font-size-22);
  --heading-card-line-height: var(--line-height-22-22);
  --body-size: var(--font-size-18);
  --body-line-height: var(--line-height-18-28);
  --control-text-size: var(--font-size-16);
  --control-text-line-height: var(--line-height-16-22);
  --caption-size: var(--font-size-14);
  --caption-line-height: var(--line-height-14-18);

  /* Provisional geometry; not measurable as original CSS from the PNGs. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --container-max: 82.5rem;
  --container-gutter: var(--space-4);
  --container-gutter-wide: var(--space-6);
  --section-gap: var(--space-12);
  --section-gap-wide: var(--space-20);
  --grid-gap: var(--space-6);
  --radius-sm: 0.25rem;
  --radius-round: 50%;
  --radius-button: var(--radius-sm);
  --radius-field: var(--radius-sm);
  --radius-card-image: var(--radius-sm);
  --radius-panel: var(--radius-sm);
  --border-width: 1px;
  --border-color: var(--color-blue-light);
  --button-min-height: 2.75rem;
  --button-padding-inline: var(--space-6);
  --icon-button-size: 2.75rem;
  --field-min-height: 3.5rem;

  /* Provisional focus, elevation and motion rules. */
  --focus-color: var(--color-primary);
  --focus-color-inverse: var(--color-white);
  --focus-width: 2px;
  --focus-offset: 3px;
  --shadow-panel: 0 12px 24px rgb(20 20 20 / 8%);
  --shadow-control: 0 4px 12px rgb(0 87 138 / 16%);
  --motion-fast: 160ms;
  --motion-easing: ease-out;
  --layer-dropdown: 20;
  --layer-dialog: 100;

  /* Homepage reconstruction: see docs/homepage-implementation.md. */
  --page-gutter: 3rem;
  --header-max: 90rem;
  --header-height: 6rem;
  --nav-height: 3.75rem;
  --hero-height: 38.75rem;
  --hero-copy-width: 40rem;
  --hero-person-width: 35rem;
  --hero-copy-top: 7.5rem;
  --quick-overlap: 3rem;
  --quick-card-min: 23rem;
  --appointment-padding: 4rem 5.5rem;
  --appointment-radius: 0.875rem;
  --section-spacing: 7rem;
  --about-height: 26rem;
  --facts-padding: 2.75rem 4rem;
  --banner-height: 25rem;
  --doctor-photo-height: 23rem;
  --document-height: 25rem;
  --map-height: 28.75rem;
  --dialog-width: 40rem;
  --overlay-backdrop: rgb(0 37 60 / 48%);
  --brand-logo-width: 13.125rem;
  --brand-logo-height: 4.5625rem;
  --icon-size: 1.5rem;
  --icon-size-small: 1rem;
  --medical-plus-size: 3rem;
  --medical-plus-stroke: 1rem;
  --focus-shadow: 0 0 0 3px var(--color-primary);
  --header-shadow: 0 6px 22px rgb(20 20 20 / 4%);
  --image-transition: 240ms;
  --hero-ribbon-width: 55%;
  --card-photo-ratio: 1.38;
  --guide-photo-ratio: 1.65;
  /* Owner-requested guide footer fix: working logo frame, not a PNG measurement. */
  --guide-brand-width: 7rem;
  --guide-brand-height: 3rem;
  --document-title-size: 1.125rem;
  --document-copy-size: 0.875rem;
  --dialog-shadow: 0 24px 80px rgb(0 37 60 / 20%);
  --letter-spacing-eyebrow: 0.09em;
  --letter-spacing-heading: -0.018em;
  --high-contrast-scale: 112.5%;

  /* Working homepage geometry and states; values preserved from the first layout.
   * These are implementation choices, not confirmed measurements from the PNGs. */
  --hero-description-width: 34rem;
  --hero-description-width-compact: 28rem;
  --hero-action-min-width: 14rem;
  --hero-action-min-width-compact: 13rem;
  --button-card-min-height: 3.25rem;
  --appointment-control-min-height: 4.25rem;
  --about-copy-width: 36rem;
  --about-portrait-width: 29rem;
  --about-portrait-width-compact: 20rem;
  --fact-copy-width: 14rem;
  --review-quote-min-height: 9rem;
  --review-action-min-width: 12rem;
  --insurance-copy-width: 48rem;
  --document-logo-width: 8rem;
  --request-copy-min-height: 12rem;
  --carousel-controls-reserved-width: 6.5rem;
  --banner-height-tablet: 23rem;
  --banner-height-compact: 22rem;
  --quick-card-min-compact: 22rem;
  --portrait-height-compact: 18rem;
  --media-height-compact: 24rem;
  --media-height-medium: 25rem;
  --dialog-max-height: 85vh;
  --dialog-max-height-compact: 90vh;
  --diagnostic-photo-ratio: 1.85;
  --disabled-opacity: 0.65;
  --accessible-ribbon-opacity: 0.25;
  --card-photo-hover-scale: 1.025;
  --consent-checked-shadow: inset 0 0 0 var(--focus-width) var(--color-white);
}

/* Working responsive geometry. Breakpoints remain CSS media-query literals. */
@media (max-width: 64rem) {
  :root {
    --page-gutter: 2rem;
    --section-spacing: 5rem;
    --hero-copy-top: 5rem;
    --hero-height: 34rem;
    --doctor-photo-height: 20rem;
    --about-height: 24rem;
  }
}

@media (max-width: 48rem) {
  :root {
    --page-gutter: 1.25rem;
    --header-height: 5.5rem;
    --brand-logo-width: 10rem;
    --brand-logo-height: 3.5rem;
    --section-spacing: 4rem;
    --quick-overlap: 2rem;
    --hero-height: 47rem;
    --hero-person-width: 22rem;
    --hero-copy-top: 3rem;
    --about-height: auto;
    --doctor-photo-height: 22rem;
    --document-height: 24rem;
    --map-height: 23rem;
  }
}

@media (max-width: 25rem) {
  :root {
    --page-gutter: 1rem;
    --hero-height: 49rem;
  }
}

/* Catalogue v1: working reconstruction of the supplied screenshots. */
:root {
  --catalog-intro-top: 2rem;
  --catalog-breadcrumb-gap: 4rem;
  --catalog-link-height: 4rem;
  --catalog-arrow-size: 3rem;
  --catalog-section-spacing: 6.5rem;
  /* Doctors directory filter: provisional width reconstructed from PNG 02. */
  --doctor-filter-width: 18rem;
}

/* Service v1: working reconstruction, not measured source Figma values. */
:root {
  --service-hero-height: 28rem;
  --service-content-padding: 4rem;
  --service-photo-height-compact: 16rem;
  --service-photo-mask: linear-gradient(90deg, transparent, var(--color-ink) 16%);
}

@media (max-width: 48rem) {
  :root {
    --service-hero-height: auto;
    --service-content-padding: 1.5rem;
  }
}

@media (max-width: 48rem) {
  :root {
    --catalog-intro-top: 1.5rem;
    --catalog-breadcrumb-gap: 2rem;
    --catalog-link-height: 3.75rem;
    --catalog-arrow-size: 2.5rem;
    --catalog-section-spacing: 4rem;
  }
}

/* Doctor profile v1: working geometry reconstructed from the supplied PNGs.
 * Portrait ratio follows reference 01; mobile sizing is an implementation rule. */
:root {
  --profile-portrait-width: 32%;
  --profile-portrait-ratio: 288 / 331;
  --profile-portrait-compact-width: 23rem;
}

/* About v1: working reconstruction of the owner's PNGs, not Figma measurements. */
:root {
  --about-content-width: 68.75rem;
  --about-hero-height: 16rem;
  --about-hero-image-width: 42%;
  --about-hero-image-position: center 30%;
  --about-gallery-ratio: 570 / 304;
  --about-gallery-compact-ratio: 4 / 3;
  --about-thumbnail-ratio: 1.9;
  --about-feature-icon-size: 4rem;
  --about-card-height: 15rem;
  --about-card-image-width: 55%;
  --about-card-copy-width: 58%;
  --about-card-image-position: center 25%;
  --about-card-mask: linear-gradient(90deg, transparent, var(--color-ink) 40%);
}

/* Licenses v1: portrait frame reconstructed from PNG 01, not source-file geometry. */
:root {
  --license-document-ratio: 142 / 192;
}

/* Reviews v1: provisional column share reconstructed from the owner's PNG 01. */
:root {
  --review-meta-width: 24%;
}

/* Contact v1: working PNG reconstruction; imagery is decorative. */
:root {
  --contact-direction-visual-width: 24%;
  --contact-direction-image-height: 12rem;
}

/* Article v1: provisional proportions reconstructed from the owner's PNGs. */
:root {
  --article-hero-ratio: 465 / 182;
  --article-toc-width: 32%;
}