/* ==========================================================================
   SENLARO — токены
   Только переменные. Ни одного селектора с оформлением.
   Базовые цвета взяты из брендбука v1.0 без изменений.
   ========================================================================== */

:root {
  /* --- Базовая палитра брендбука ------------------------------------------ */
  --senlaro-navy: #0b2239;
  --trust-teal: #0e7c70;
  --signal-mint: #42d3bd;
  --graphite: #2d3b48;
  --cloud: #f4f7fa;
  --pearl: #c7b8a2;
  --white: #ffffff;

  /* --- Производные служебные оттенки -------------------------------------- */
  --navy-900: #071726;
  --navy-700: #123049;
  --navy-60: rgba(11, 34, 57, 0.6);
  --navy-40: rgba(11, 34, 57, 0.4);
  --navy-12: rgba(11, 34, 57, 0.12);
  --navy-06: rgba(11, 34, 57, 0.06);
  --teal-700: #0a6157;
  --mint-16: rgba(66, 211, 189, 0.16);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-16: rgba(255, 255, 255, 0.16);

  /* Плашка демонстрационных данных. Служебный цвет интерфейса,
     в фирменную палитру не входит и в рабочей версии исчезает
     вместе с демонстрационными записями. */
  --demo-bg: #fff8e6;
  --demo-border: #e5c56b;
  --demo-text: #6b4e05;

  /* Служебный цвет ошибки формы. В фирменную палитру не входит:
     используется только для состояний полей ввода. */
  --error: #a4262c;
  --error-bg: #fdf3f3;

  /* --- Семантические роли -------------------------------------------------- */
  --bg-page: var(--white);
  --bg-section: var(--cloud);
  --bg-card: var(--white);
  --bg-inverse: var(--navy-900);

  --text-primary: var(--graphite);
  --text-heading: var(--senlaro-navy);
  --text-muted: var(--navy-60);
  --text-inverse: var(--white);
  --text-inverse-muted: var(--white-70);

  --border-subtle: var(--navy-06);
  --border-card: var(--navy-12);
  --link: var(--trust-teal);
  --link-hover: var(--teal-700);
  --accent: var(--signal-mint);
  --focus: var(--trust-teal);

  /* --- Типографика --------------------------------------------------------- */
  /* Локальные WOFF2 не подключены: файлы Inter не предоставлены.
     Подключение — в base.css, блок @font-face (закомментирован). */
  --font-base: Inter, Arial, sans-serif;

  --fs-display: 2rem;      /* 32px  → 56px на десктопе */
  --fs-h1: 1.75rem;        /* 28px  → 40px */
  --fs-h2: 1.5rem;         /* 24px  → 30px */
  --fs-h3: 1.1875rem;      /* 19px  → 21px */
  --fs-body-l: 1.0625rem;  /* 17px  → 18px */
  --fs-body: 1rem;         /* 16px */
  --fs-ui: 0.9375rem;      /* 15px */
  --fs-caption: 0.8125rem; /* 13px */

  --lh-display: 1.1;
  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-body: 1.55;

  --ls-display: -0.02em;
  --ls-h2: -0.015em;
  --ls-caps: 0.06em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- Пространство (шаг 4px) ---------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --section-y: var(--s-16);   /* 64px  → 112px на десктопе */
  --page-x: 1.25rem;          /* 20px  → 32px → авто */
  --container: 1180px;
  --container-narrow: 720px;

  /* --- Скругления ---------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Тени (всего две) ---------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(11, 34, 57, 0.04), 0 8px 24px rgba(11, 34, 57, 0.06);
  --shadow-hover: 0 2px 4px rgba(11, 34, 57, 0.06), 0 16px 40px rgba(11, 34, 57, 0.1);

  /* --- Прочее -------------------------------------------------------------- */
  --tap: 44px;               /* минимальная область нажатия */
  --header-h: 64px;
  --transition: 160ms ease;
}

@media (min-width: 768px) {
  :root {
    --fs-display: 2.75rem;
    --fs-h1: 2.25rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --fs-body-l: 1.125rem;
    --section-y: var(--s-24);
    --page-x: 2rem;
    --header-h: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 3.5rem;   /* 56px */
    --fs-h1: 2.5rem;        /* 40px */
    --fs-h2: 1.875rem;      /* 30px */
    --section-y: 7rem;      /* 112px */
  }
}