/* tokens.css — дизайн-токены vietinru app
 *
 * Правила файла:
 *  1. Здесь только переменные. Никаких селекторов компонентов.
 *  2. Все значения — в rem/px через токены; компоненты не пишут цвета напрямую.
 *  3. Тёмная тема: системная (prefers-color-scheme) + ручной класс .theme-dark
 *     на <html>. Значения палитры объявлены один раз (--lt-… и --dk-…), ниже —
 *     только алиасы. При добавлении цвета правим оба набора.
 *  4. Контраст проверен: text/surface 17.9:1, muted/surface 6.2:1,
 *     accent-text/surface 5.4:1, accent-ink/accent 8.3:1 (light);
 *     в тёмной — не ниже 5.8:1.
 */

:root {
  color-scheme: light dark;

  /* ── Типографика ─────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-2xs: 0.75rem;      /* 12 — таб-бар, бейджи */
  --fs-xs: 0.8125rem;     /* 13 — метаданные, подписи */
  --fs-sm: 0.875rem;      /* 14 — вторичный текст, кнопки */
  --fs-base: 1rem;        /* 16 — база */
  --fs-md: 1.0625rem;     /* 17 — заголовок карточки */
  --fs-lg: 1.3125rem;     /* 21 — заголовок страницы */
  --fs-xl: 1.75rem;       /* 28 — герой на мобиле */
  --fs-2xl: 2.125rem;     /* 34 — герой на десктопе */
  --fs-metric: 2.75rem;   /* 44 — главная цифра (дни визы) */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.55;

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

  --ls-tight: -0.011em;
  --ls-caps: 0.06em;

  /* ── Сетка отступов (шаг 4) ──────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ── Радиусы, тени, движение ─────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  --dur-1: 120ms;
  --dur-2: 150ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ── Раскладка ───────────────────────────────────────────────────────── */
  --w-content: 640px;     /* колонка текста/карточек на мобиле и планшете */
  --w-wide: 720px;        /* колонка на десктопе */
  --w-nav: 240px;
  --topbar-h: 56px;
  --tabbar-h: 60px;
  --tap: 44px;            /* минимальный тап-таргет */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ── Палитры: сырые значения ───────────────────────────────────────────── */
:root {
  --lt-bg: #f4f6f8;
  --lt-surface: #ffffff;
  --lt-surface-2: #f1f4f7;
  --lt-surface-3: #e5eaf0;
  --lt-border: #e2e6ec;
  --lt-border-strong: #c8d0da;
  --lt-text: #15171c;
  --lt-text-muted: #59626f;
  --lt-text-faint: #626b78;
  --lt-accent: #f59e0b;
  --lt-accent-ink: #20160a;
  --lt-accent-text: #a35700;
  --lt-accent-soft: #fdf3e3;
  --lt-accent-border: #f2d5a6;
  --lt-ok: #15803d;
  --lt-ok-soft: #eafaf0;
  --lt-warn: #b45309;
  --lt-warn-soft: #fff7ed;
  --lt-danger: #b91c1c;
  --lt-danger-soft: #fef2f2;
  --lt-info: #1d4ed8;
  --lt-info-soft: #eff4ff;
  --lt-focus: #a35700;
  --lt-sh-1: 0 1px 2px rgba(15, 17, 21, 0.05), 0 1px 3px rgba(15, 17, 21, 0.04);
  --lt-sh-2: 0 4px 16px rgba(15, 17, 21, 0.08);

  --dk-bg: #0f1115;
  --dk-surface: #171a21;
  --dk-surface-2: #1e232b;
  --dk-surface-3: #272d37;
  --dk-border: #2a303a;
  --dk-border-strong: #3b434f;
  --dk-text: #eef0f4;
  --dk-text-muted: #a6aeba;
  --dk-text-faint: #939ba8;
  --dk-accent: #fbbf24;
  --dk-accent-ink: #1a1205;
  --dk-accent-text: #fcd34d;
  --dk-accent-soft: #2b2517;
  --dk-accent-border: #4a3a12;
  --dk-ok: #4ade80;
  --dk-ok-soft: #1b2b24;
  --dk-warn: #fbbf24;
  --dk-warn-soft: #2c2417;
  --dk-danger: #f87171;
  --dk-danger-soft: #2e1c1d;
  --dk-info: #93c5fd;
  --dk-info-soft: #17243a;
  --dk-focus: #fcd34d;
  --dk-sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dk-sh-2: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ── Семантические алиасы: светлая тема (по умолчанию) ─────────────────── */
:root {
  --bg: var(--lt-bg);
  --surface: var(--lt-surface);
  --surface-2: var(--lt-surface-2);
  --surface-3: var(--lt-surface-3);
  --border: var(--lt-border);
  --border-strong: var(--lt-border-strong);
  --text: var(--lt-text);
  --text-muted: var(--lt-text-muted);
  --text-faint: var(--lt-text-faint);
  --accent: var(--lt-accent);
  --accent-ink: var(--lt-accent-ink);
  --accent-text: var(--lt-accent-text);
  --accent-soft: var(--lt-accent-soft);
  --accent-border: var(--lt-accent-border);
  --ok: var(--lt-ok);
  --ok-soft: var(--lt-ok-soft);
  --warn: var(--lt-warn);
  --warn-soft: var(--lt-warn-soft);
  --danger: var(--lt-danger);
  --danger-soft: var(--lt-danger-soft);
  --info: var(--lt-info);
  --info-soft: var(--lt-info-soft);
  --focus: var(--lt-focus);
  --sh-1: var(--lt-sh-1);
  --sh-2: var(--lt-sh-2);
}

/* ── Семантические алиасы: тёмная тема по системе ──────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    color-scheme: dark;
    --bg: var(--dk-bg);
    --surface: var(--dk-surface);
    --surface-2: var(--dk-surface-2);
    --surface-3: var(--dk-surface-3);
    --border: var(--dk-border);
    --border-strong: var(--dk-border-strong);
    --text: var(--dk-text);
    --text-muted: var(--dk-text-muted);
    --text-faint: var(--dk-text-faint);
    --accent: var(--dk-accent);
    --accent-ink: var(--dk-accent-ink);
    --accent-text: var(--dk-accent-text);
    --accent-soft: var(--dk-accent-soft);
    --accent-border: var(--dk-accent-border);
    --ok: var(--dk-ok);
    --ok-soft: var(--dk-ok-soft);
    --warn: var(--dk-warn);
    --warn-soft: var(--dk-warn-soft);
    --danger: var(--dk-danger);
    --danger-soft: var(--dk-danger-soft);
    --info: var(--dk-info);
    --info-soft: var(--dk-info-soft);
    --focus: var(--dk-focus);
    --sh-1: var(--dk-sh-1);
    --sh-2: var(--dk-sh-2);
  }
}

/* ── Семантические алиасы: тёмная тема вручную (.theme-dark на <html>) ─── */
:root.theme-dark {
  color-scheme: dark;
  --bg: var(--dk-bg);
  --surface: var(--dk-surface);
  --surface-2: var(--dk-surface-2);
  --surface-3: var(--dk-surface-3);
  --border: var(--dk-border);
  --border-strong: var(--dk-border-strong);
  --text: var(--dk-text);
  --text-muted: var(--dk-text-muted);
  --text-faint: var(--dk-text-faint);
  --accent: var(--dk-accent);
  --accent-ink: var(--dk-accent-ink);
  --accent-text: var(--dk-accent-text);
  --accent-soft: var(--dk-accent-soft);
  --accent-border: var(--dk-accent-border);
  --ok: var(--dk-ok);
  --ok-soft: var(--dk-ok-soft);
  --warn: var(--dk-warn);
  --warn-soft: var(--dk-warn-soft);
  --danger: var(--dk-danger);
  --danger-soft: var(--dk-danger-soft);
  --info: var(--dk-info);
  --info-soft: var(--dk-info-soft);
  --focus: var(--dk-focus);
  --sh-1: var(--dk-sh-1);
  --sh-2: var(--dk-sh-2);
}