/* =========================================================================
   Optimal Clinic — design tokens
   Світла, тепла палітра. Теракота бренду + нефритовий акцент «чіткості».
   ========================================================================= */

:root {
  /* ---- brand ---- */
  --brand-900: #982b2b;
  --brand-800: #ac3231;
  --brand-700: #bd3938;
  --brand-600: #c63837;
  --brand-500: #d33d3b;
  --brand-400: #e15a4b;
  --brand-300: #F09C8E;
  --brand-200: #F8CDC4;
  --brand-100: #FCE4DD;
  --brand-050: #FDF1ED;

  /* ---- jade: «чіткість зору» ---- */
  --jade-900: #053028;
  --jade-700: #095247;
  --jade-600: #0c695b;
  --jade-500: #178371;
  --jade-300: #7FC9BB;
  --jade-100: #DCF0EB;
  --jade-050: #EDF7F5;

  /* ---- amber ---- */
  --amber-600: #ab6e17;
  --amber-500: #be8829;
  --amber-200: #F6DEB2;
  --amber-050: #FDF6E9;

  /* ---- neutrals (теплі) ---- */
  --ink-900: #171110;
  --ink-800: #241B19;
  --ink-700: #302522;
  --ink-600: #463A35;
  --ink-500: #51423C;
  --ink-400: #625049;
  --ink-300: #B3A099;
  --ink-200: #D9CCC5;
  --ink-150: #E7DCD5;
  --ink-100: #F0E7E1;
  --ink-050: #F7F1EC;

  --paper: #F5F0E7;
  --cream: #E9DFD2;
  --sand:  #E1D2C2;

  /* ---- semantic ---- */
  --bg: var(--paper);
  --bg-soft: var(--cream);
  --bg-sand: var(--sand);
  --bg-brand-wash: var(--brand-050);
  --bg-jade-wash: var(--jade-050);

  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-soft: var(--ink-400);
  --text-invert: #FFF8F5;
  --text-brand: var(--brand-700);

  --line: var(--ink-200);
  --line-strong: var(--ink-300);
  --line-brand: var(--brand-200);

  /* ---- typography ---- */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;

  /* мінімальний розмір у системі — 16px. Нижче не опускається ніде. */
  --fs-min: 16px;
  --fs-14: 16px;
  --fs-15: 16px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: clamp(18px, 1.15vw + 14px, 20px);
  --fs-22: clamp(19px, 1.4vw + 14px, 22px);
  --fs-26: clamp(21px, 1.9vw + 14px, 26px);
  --fs-32: clamp(24px, 2.6vw + 14px, 32px);
  --fs-40: clamp(28px, 3.4vw + 14px, 40px);
  --fs-52: clamp(32px, 4.6vw + 14px, 52px);
  --fs-68: clamp(38px, 6.2vw + 14px, 68px);
  --fs-88: clamp(44px, 8vw + 14px, 88px);
  --fs-120: clamp(56px, 11vw + 14px, 120px);

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.68;

  --tracking-wide: 0em;
  --tracking-eyebrow: 0em;

  /* ---- space ---- */
  --s-2: 2px;   --s-4: 4px;   --s-6: 6px;   --s-8: 8px;
  --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px;
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-56: 56px;
  --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-128: 128px;

  --section-y: clamp(64px, 7vw, 128px);
  --gutter: clamp(20px, 4vw, 48px);
  --shell: 1320px;
  --shell-narrow: 860px;

  /* ---- radii ---- */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-xl: 48px;
  --r-pill: 999px;

  /* ---- elevation (тепла тінь, не сіра) ---- */
  --shadow-xs: 0 1px 2px rgba(60, 30, 22, .06);
  --shadow-sm: 0 2px 8px rgba(60, 30, 22, .06), 0 1px 2px rgba(60, 30, 22, .04);
  --shadow-md: 0 10px 30px -12px rgba(60, 30, 22, .18), 0 2px 8px rgba(60, 30, 22, .05);
  --shadow-lg: 0 28px 64px -28px rgba(60, 30, 22, .28), 0 6px 18px rgba(60, 30, 22, .06);
  --shadow-xl: 0 48px 96px -40px rgba(60, 30, 22, .34), 0 10px 28px rgba(60, 30, 22, .07);
  --shadow-brand: 0 20px 46px -20px rgba(192, 57, 43, .45);
  --shadow-jade: 0 20px 46px -20px rgba(14, 124, 107, .38);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;
  --dur-slower: 1.1s;

  --header-h: 84px;
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
}