/* tokens.css — дизайн-токены лендинга «круг».
 * ИСТОЧНИК ПРАВДЫ: client/src/shared/ui/theme.ts (канон приложения).
 * НЕ вводить новые цвета/размеры — только значения из theme.ts и
 * ступени из cool_messenger_docs/WEB-LANDING-STYLE.md §2.
 * Тёмная тема — через prefers-color-scheme (переключатель не нужен в v1). */

/* ---- Шрифт: Manrope (OFL, полная кириллица) — канон приложения.
 * Plus Jakarta Sans отвергнут (нет кириллицы, см. theme.ts:241-244). */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope_500Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- Светлая палитра (theme.ts lightColors) ---- */
  --primary: #e37a13;            /* оранж «Основной» (кнопки/акцент) */
  --primary-pressed: #9d3f00;
  --accent: #536343;             /* хаки «Иконки» */
  --accent-dark: #394229;
  --ink: #803500;                /* оранж «Иконки» — коричневые action-иконки */
  --ink-muted: #b46a1d;

  --bg: #ffffff;
  --surface: #f5f4f1;            /* хаки «Плашки» */
  --surface-strong: #fffdf8;
  --surface-muted: #f0ede6;
  --border: #b9bab4;
  --divider: #e7e1d7;

  --text-primary: #2e3427;
  --text-secondary: #6d7168;
  --text-inverse: #ffffff;

  --button-primary: #e37a13;         /* светлая: оранжевая (макет «Кнопки») */
  --button-primary-pressed: #9d3f00;
  --button-primary-text: #ffffff;
  --logo-circle: #e37a13;            /* authLogo светлой темы */
  --field-border: #ffc8a9;           /* authFieldBorder */
  --link: #b46a1d;                   /* authTermsLink / usernameAccent */

  /* ---- Типографика: ступени WEB-LANDING-STYLE.md §2 (base <768) ---- */
  --fs-hero: 2.5rem;      /* 40px */
  --fs-h2: 1.75rem;       /* 28px */
  --fs-h3: 1.25rem;       /* 20px */
  --fs-lead: 1.125rem;    /* 18px */
  --fs-body: 1rem;        /* 16px */
  --fs-small: 0.875rem;   /* 14px */

  --lh-tight: 1.25;       /* theme.ts lineHeight */
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* ---- Сетка ---- */
  --container: 1200px;
  --pad-inline: 16px;
  --section-gap: 48px;

  /* ---- Радиусы: pill-канон макетов (поля/кнопки полностью скруглены) ---- */
  --radius-pill: 999px;
  --radius-card: 20px;
}

@media (min-width: 768px) {
  :root {
    --fs-hero: 3.5rem;    /* 56px */
    --fs-h2: 2rem;        /* 32px */
    --fs-h3: 1.375rem;    /* 22px */
    --fs-lead: 1.25rem;   /* 20px */
    --pad-inline: 24px;
    --section-gap: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-hero: 4rem;      /* 64px */
    --fs-h2: 2.5rem;      /* 40px */
    --fs-h3: 1.5rem;      /* 24px */
    --section-gap: 96px;
  }
}

/* ---- Тёмная палитра (theme.ts darkColors; макеты «Темная тема») ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #e37a13;
    --primary-pressed: #c76a00;
    --accent: #bdc5b5;
    --accent-dark: #e1e4d3;
    --ink: #e37a13;            /* action-иконки в тёмной — яркий оранж */
    --ink-muted: #e6a13d;

    --bg: #2e3427;             /* хаки «Фон» */
    --surface: #556048;        /* хаки «Плашки» */
    --surface-strong: #5a634c;
    --surface-muted: #454d39;
    --border: #97a489;
    --divider: #66705b;

    --text-primary: #bdc5b5;
    --text-secondary: #a0a899;
    --text-inverse: #ffffff;

    --button-primary: #556048;        /* тёмная: ОЛИВКОВАЯ, не оранжевая (канон «Кнопки») */
    --button-primary-pressed: #262b1f;
    --button-primary-text: #ffffff;
    --logo-circle: #97a489;           /* authLogo тёмной — шалфей */
    --field-border: #6f7963;
    --link: #bdc5b5;
  }
}