/* =================================================================
   LK Dental Center — Design Tokens
   Soft Medical Modernism · Inter · 8pt grid
   ================================================================= */

:root {

  /* ── NEUTRALS: warm gray scale, 11 steps (50–950) ────────────── */
  --neutral-50:  #FAFAF8;
  --neutral-100: #F4F2EE;
  --neutral-200: #E8E4DE;
  --neutral-300: #D4CFCA;
  --neutral-400: #B5AFA8;
  --neutral-500: #958F87;
  --neutral-600: #736D67;
  --neutral-700: #524E48;
  --neutral-800: #34312C;
  --neutral-900: #1E1C18;
  --neutral-950: #0F0E0C;

  /* ── BRAND PRIMARY: з існуючого style.css (#5a2913) ──────────── */
  --brand-primary:      #5A2913;   /* глибокий марун — оригінальний --color-primary */
  --brand-primary-soft: #F5EDE8;   /* світлий тінт для фонів секцій */
  --brand-primary-deep: #3E1C0A;   /* темніший — hover / active */

  /* ── BRAND ACCENT: з існуючого style.css (background-color:#cd853f) */
  --brand-accent:       #CD853F;   /* тепле бурштинове золото — CTA / акцент */
  --brand-accent-soft:  #F9F0E8;   /* світлий тінт акценту */
  --brand-accent-deep:  #A46A32;   /* темніший — hover CTA */

  /* ── BRAND ACCENT-2: з існуючого style.css (color:#91765a) ────── */
  --brand-warm:         #91765A;   /* тепла сієна — вторинний акцент / декор */
  --brand-warm-soft:    #F2EBE3;   /* тінт сієни */

  /* ── INK (текст) ─────────────────────────────────────────────── */
  --ink-900: #1A1F2B;   /* основний текст — графіт */
  --ink-600: #5A6373;   /* другорядний */
  --ink-400: #95A0B0;   /* підказки, дрібні підписи */
  --ink-300: #C9CFD8;   /* disabled */

  /* ── ПОВЕРХНІ ────────────────────────────────────────────────── */
  --bg-page:        #FDFAF6;   /* фон сторінки — cream */
  --bg-section-alt: #F4F2EE;   /* альтернативний фон секцій */
  --surface-card:   #FFFFFF;   /* картки */
  --border-soft:    #ECECEA;   /* м'які бордюри */

  /* ── SEMANTIC ─────────────────────────────────────────────────── */
  --color-success: #2E9B6A;
  --color-danger:  #D84A45;
  --color-warning: #E8A021;
  --color-info:    #3A86C8;

  /* ── ТИПОГРАФІКА: шрифти ─────────────────────────────────────── */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ── ТИПОГРАФІКА: розміри (fluid clamp desktop→mobile) ────────── */
  --text-h1:      clamp(40px, 5vw, 64px);
  --text-h2:      clamp(30px, 3.5vw, 44px);
  --text-h3:      clamp(22px, 2vw, 26px);
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-small:   14px;

  /* ── ТИПОГРАФІКА: line-height ────────────────────────────────── */
  --lh-display: 1.05;
  --lh-h2:      1.1;
  --lh-h3:      1.2;
  --lh-body:    1.6;
  --lh-small:   1.5;

  /* ── ТИПОГРАФІКА: letter-spacing ────────────────────────────── */
  --ls-h1:    -0.02em;
  --ls-h2:    -0.015em;
  --ls-h3:    -0.01em;
  --ls-small:  0.01em;

  /* ── ТИПОГРАФІКА: font-weight ────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── SPACING: 8pt grid ───────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ── SPACING: секції та контейнер ───────────────────────────── */
  --section-py:        96px;
  --section-py-mobile: 48px;
  --container-max:     1200px;
  --grid-gap:          24px;
  --grid-gap-mobile:   16px;

  /* ── BORDER RADII ─────────────────────────────────────────────── */
  --radius-pill:   20px;
  --radius-tag:    20px;
  --radius-btn:    6px;
  --radius-input:  6px;
  --radius-card:   16px;
  --radius-card-lg:24px;
  --radius-hero:   0;

  /* ── ТІНІ: м'які, дифузні ────────────────────────────────────── */
  --shadow-card-soft:
    0 1px 2px  rgba(20, 30, 50, 0.04),
    0 8px 24px rgba(20, 30, 50, 0.06);

  --shadow-card-hover:
    0 2px 4px   rgba(20, 30, 50, 0.06),
    0 16px 40px rgba(20, 30, 50, 0.10);

  --shadow-floating-cta:
    0 4px 12px  rgba(20, 30, 50, 0.08),
    0 20px 48px rgba(20, 30, 50, 0.12);

  /* ── FOCUS ────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(90, 41, 19, 0.25);

  /* ── МОУШН ────────────────────────────────────────────────────── */
  --duration-fast:   180ms;
  --duration-base:   240ms;
  --duration-slow:   600ms;
  --ease-out:        ease-out;
  --ease-std:        ease;
  --hover-lift:      scale(1.02);
}

/* ── REDUCED MOTION — обов'язково ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}