/* ============================================================
   KidmaTech — Design Tokens
   Концепт «Тёплое доверие». Единый источник правды для цвета,
   типографики, отступов, скруглений, теней, анимации.
   Подключать ПЕРВЫМ, до остальных стилей.
   Все компоненты ссылаются только на эти переменные — менять
   тему = менять значения здесь, а не в коде страниц.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     ЦВЕТ
     Бренд = зелёный/бирюза. CTA = терракота (только кнопки).
     Контраст выверен под WCAG 2.1 AA (см. DESIGN-SYSTEM.md §контраст).
     ---------------------------------------------------------- */

  /* Фон и поверхности */
  --color-bg: #F5F1EA;            /* тёплый айвори — основной фон */
  --color-surface: #FFFFFF;       /* карточки, поля формы */
  --color-surface-alt: #FCFAF6;   /* лёгкая тёплая подложка секций */

  /* Текст */
  --color-ink: #2B2620;           /* основной текст (контраст к bg ~13:1) */
  --color-ink-muted: #6B6258;     /* подзаголовки, подписи (контраст ~5:1) */
  --color-ink-faint: #8A8175;     /* мелкие подписи, плейсхолдеры (только крупный/UI) */
  --color-on-brand: #FFFFFF;      /* текст на зелёном фоне */
  --color-on-cta: #FFFFFF;        /* текст на терракоте (только bold ≥1.0625rem) */
  --color-on-dark: #ECE6DB;       /* текст в тёмном футере */

  /* Бренд (зелёный) */
  --color-brand: #0F8C82;         /* лого, иконки, акценты, крупные выделения */
  --color-brand-strong: #0C6B63;  /* зелёный текст body-размера на свету (AA ≥4.5) */
  --color-brand-hover: #0C736B;   /* ховер ссылок/иконок */
  --color-brand-soft: #DCEDEB;    /* подложки иконок, мягкие плашки */

  /* CTA (терракота) — ТОЛЬКО кнопки действия */
  --color-cta: #CC785C;
  --color-cta-hover: #B8674E;
  --color-cta-active: #A85B43;
  --color-cta-strong: #B5634A;    /* если терракота нужна мелким текстом (редко) */

  /* Линии и границы */
  --color-border: #E5DED2;        /* hairline, разделители, рамки полей */
  --color-border-strong: #D4CABA;

  /* Тёмный футер */
  --color-dark-bg: #1F1B16;
  --color-dark-surface: #2B2620;

  /* Состояния формы */
  --color-focus: var(--color-brand);   /* кольцо фокуса */
  --color-success: #2E7D5B;
  --color-error: #B23A2E;

  /* ----------------------------------------------------------
     ТИПОГРАФИКА
     База 18px (1.125rem) — крупнее обычного, ради доступности.
     Шрифты переключаются через :lang() (см. ниже).
     Шкала ≈ мажорная терция (1.25).
     ---------------------------------------------------------- */

  /* Семейства (self-host woff2, font-display:swap) */
  --font-en: "Geist", system-ui, sans-serif;
  --font-ru: "Inter", "Noto Sans", system-ui, sans-serif;
  --font-he: "Heebo", "Noto Sans Hebrew", system-ui, sans-serif;
  --font-ar: "Noto Sans Arabic", system-ui, sans-serif;
  --font-base: var(--font-ru);    /* мастер-язык — русский */

  /* Display-шрифт заголовков (тёплый премиум-serif с характером).
     Только RU/EN — для иврита/арабского переопределяется ниже на их sans
     (Playfair их письменности не покрывает). */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Размеры */
  --text-xs: 0.8125rem;   /* 13px — служебное, не для body */
  --text-sm: 0.9375rem;   /* 15px — подписи */
  --text-base: 1.125rem;  /* 18px — основной текст */
  --text-lg: 1.375rem;    /* 22px — лид-абзац, крупные строки */
  --text-xl: 1.75rem;     /* 28px — H3 */
  --text-2xl: 2.25rem;    /* 36px — H2 */
  --text-3xl: 3rem;       /* 48px — крупные заголовки секций */
  --text-4xl: 3.75rem;    /* 60px — H1 hero (desktop) */

  /* Высота строки */
  --leading-tight: 1.15;  /* заголовки */
  --leading-snug: 1.35;   /* подзаголовки */
  --leading-normal: 1.6;  /* основной текст */

  /* Насыщенность */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Межбуквенное */
  --tracking-tight: -0.02em;  /* крупные заголовки */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;    /* надписи капсом (направления в hero) */

  /* ----------------------------------------------------------
     ОТСТУПЫ (шкала на базе 4px)
     ---------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 — вертикальные интервалы между секциями */

  /* ----------------------------------------------------------
     РАСКЛАДКА
     ---------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: var(--space-5);   /* боковые поля контейнера (моб.) */
  --content-measure: 65ch;           /* макс. ширина абзаца для читабельности */

  /* ----------------------------------------------------------
     СКРУГЛЕНИЯ
     ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;    /* кнопки, поля формы */
  --radius-lg: 16px;    /* карточки */
  --radius-xl: 24px;    /* крупные блоки */
  --radius-pill: 999px; /* пилюли, чипы, круглые кнопки */

  /* ----------------------------------------------------------
     ТЕНИ (тёплый оттенок, мягкие)
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(43, 38, 32, 0.06);
  --shadow-md: 0 6px 20px rgba(43, 38, 32, 0.08);
  --shadow-lg: 0 16px 40px rgba(43, 38, 32, 0.12);
  --shadow-focus: 0 0 0 3px rgba(15, 140, 130, 0.45);  /* кольцо фокуса */

  /* ----------------------------------------------------------
     АНИМАЦИЯ
     ---------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;      /* шапка */
  --z-dropdown: 200;    /* переключатель языка, меню */
  --z-widget: 800;      /* чат-виджет */
  --z-overlay: 900;     /* баннер куки, модалки */
  --z-toast: 1000;
}

/* Переключение шрифта по языку контента.
   Применять lang="" на <html> или на блоках перевода. */
:lang(en) { --font-base: var(--font-en); }
:lang(ru) { --font-base: var(--font-ru); }
:lang(he) { --font-base: var(--font-he); }
:lang(ar) { --font-base: var(--font-ar); }

/* Иврит/арабский: display-заголовки на их же sans (Playfair их не покрывает). */
:lang(he) { --font-display: var(--font-he); }
:lang(ar) { --font-display: var(--font-ar); }

/* Адаптив: на узких экранах ужать hero-заголовок и интервалы секций. */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2.5rem;   /* 40px — hero на мобильном */
    --text-3xl: 2rem;     /* 32px */
    --text-2xl: 1.75rem;  /* 28px */
    --space-10: 4rem;     /* меньше воздуха между секциями */
    --space-9: 3rem;
  }
}

/* Доступность: уважать prefers-reduced-motion (требование спеки). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}