/* ============================================================
   TOKENS — Клиника Магомедкамиловых
   Source: memory/ui-kit.md § 3 (Tokens)
   DO NOT EDIT manually — reflect ui-kit.md only
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg-main:       #F7F6F3;   /* warm page background   */
  --color-bg-white:      #FFFFFF;   /* cards, content blocks  */
  --color-text-dark:     #1A201E;   /* primary text / footer  */
  --color-text-muted:    #5E6966;   /* secondary, captions    */
  --color-brand-gold:    #BF8227;   /* gold accent            */
  --color-brand-gold-lt: #FFF2CA;   /* light gold / hover bg  */
  --color-border-light:  #E5E8E5;   /* delicate dividers      */
  --color-status-error:  #A94442;   /* validation errors      */
  --color-status-ok:     #3C763D;   /* success states         */
  --color-overlay:       rgba(26, 32, 30, 0.4); /* modal bg  */

  /* ── Typography ─────────────────────────────────────────── */
  --font-serif:  'Lora', 'Georgia', serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Scale — mobile first, desktop via clamp() */
  --fs-h1:    clamp(2.5rem, 6vw, 4rem);      /* 40→64px  */
  --fs-h2:    clamp(1.75rem, 3vw, 2.625rem); /* 28→42px  */
  --fs-h3:    clamp(1.25rem, 2vw, 1.75rem);  /* 20→28px  */
  --fs-body:  clamp(0.9375rem, 1vw, 1rem);   /* 15→16px  */
  --fs-small: clamp(0.75rem, 0.9vw, 0.8125rem); /* 12→13px */
  --fs-ui:    0.875rem;                      /* 14px always */

  --lh-tight:  1.1;
  --lh-heading: 1.2;
  --lh-body:   1.6;
  --lh-small:  1.4;
  --ls-ui:     0.05em;

  /* ── Spacing (8-point grid) ──────────────────────────────── */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  /* --sp-5 отсутствовал, хотя макеты обращались к нему 420 раз (gap, padding,
     margin). Необъявленная переменная делает объявление невалидным, и отступ
     просто не применялся — сильнее всего на страницах услуг. 40px = 5 × 8. */
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-7:  56px;
  --sp-8:  64px;
  --sp-9:  72px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-15: 120px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:    1440px;
  --container-px:     clamp(1rem, 4vw, 4rem); /* 16px→64px */
  --header-height:    68px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:  4px;   /* buttons, inputs                     */
  --radius-md:  8px;   /* cards, modals                       */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-float: 0 4px 20px rgba(26, 32, 30, 0.05);
  --shadow-modal: 0 8px 40px rgba(26, 32, 30, 0.12);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-appear: 0.6s;
  --duration-hover:  0.25s;

  /* ── Z-index layers ─────────────────────────────────────── */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-sticky:  400;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-dark);
  background: var(--color-bg-main);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* ── Container ───────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ── Typography helpers ───────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: 600;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 600;
}
.text-muted { color: var(--color-text-muted); }
.text-gold  { color: var(--color-brand-gold); }
.text-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.text-ui {
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Breakpoints (reference, used in components) ─────────── */
/* 375 / 768 / 1024 / 1440 / 1920 */