/* 001-design-tokens.css — Единый источник design tokens
 * Все цвета, spacing, typography должны использовать эти переменные
 * v1.0.0 | 2025-12-10
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * СОСТОЯНИЕ НАЖАТИЯ — один приём на весь продукт
 * Источник: docs/ui/handoff-v4/canvas/Переработка дизайна приложения/
 * design_handoff_heys_v4/home-widgets.v4.dc.html, строка
 * «состояние нажатия · правило продукта».
 *
 * Запись приёма — ровно эта пара, и она одинакова во всех правилах :active:
 *
 *   opacity: 0.7;
 *   transition: opacity 120ms ease;
 *
 * Единственное исключение — плитка Главной (.widget:active в
 * 730-widgets-dashboard.css): к гашению добавлен масштаб 0.965.
 *
 * Прочтение «120 мс». Строка допускает два: (а) гаснет мгновенно, возвращается
 * за 120 мс; (б) переход 120 мс в обе стороны. Выбрано (б) — симметричное.
 * Причина: длительность возврата задаёт transition базового правила элемента, а
 * не правило :active (браузер берёт transition из состояния, В которое
 * переходит). Прочтение (а) потребовало бы переписать shorthand `transition` у
 * ~330 базовых правил — это молча сменило бы тайминги их показа/скрытия и
 * hover, то есть правка вышла бы далеко за состояние нажатия. Симметричные
 * 120 мс живут внутри самого правила нажатия, поэтому число во всём продукте
 * ровно одно. Плитка Главной названа в контракте поимённо, и у неё возврат
 * доведён до 120 мс и в базовом правиле .widget.
 *
 * Ни смены заливки, ни ряби, ни тени при нажатии быть не должно — это проверяет
 * apps/web/__tests__/press-state-v4-product-rule.test.js, там же поимённый
 * список отступлений (ползунки, перетаскивание, раскрытие по нажатию).
 * ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
   * COLOR PALETTE — Semantic Colors
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Primary Brand */
  --heys-primary: var(--v4-act, #2563eb);
  --heys-primary-hover: var(--v4-act-text, #1d4ed8);
  --heys-primary-light: var(--v4-water, #3b82f6);
  --heys-primary-bg: #eff6ff;

  /* Success / Green */
  --heys-success: var(--v4-ok-fill, #22c55e);
  --heys-success-hover: var(--v4-ok-text, #16a34a);
  --heys-success-light: #4ade80;
  --heys-success-bg: var(--v4-ok-bg, #f0fdf4);

  /* Warning / Yellow */
  --heys-warning: var(--v4-warn-soft, #eab308);
  --heys-warning-hover: #ca8a04;
  --heys-warning-light: #fde047;
  --heys-warning-bg: #fefce8;

  /* Danger / Red */
  --heys-danger: var(--v4-warn-1, #ef4444);
  --heys-danger-hover: var(--v4-warn-2, #dc2626);
  --heys-danger-light: #f87171;
  --heys-danger-bg: #fef2f2;

  /* Info / Blue */
  --heys-info: var(--v4-water, #3b82f6);
  --heys-info-hover: var(--v4-act, #2563eb);
  --heys-info-light: #60a5fa;
  --heys-info-bg: #eff6ff;

  /* Neutral */
  --heys-neutral-50: #fafafa;
  --heys-neutral-100: #f4f4f5;
  --heys-neutral-200: #e4e4e7;
  --heys-neutral-300: #d4d4d8;
  --heys-neutral-400: #a1a1aa;
  --heys-neutral-500: #71717a;
  --heys-neutral-600: #52525b;
  --heys-neutral-700: #3f3f46;
  --heys-neutral-800: #27272a;
  --heys-neutral-900: #18181b;

  /* ═══════════════════════════════════════════════════════════════════════════
   * SEMANTIC UI COLORS
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Backgrounds */
  --heys-bg-page: var(--v4-bg, #ffffff);
  --heys-bg-card: var(--v4-bg, #ffffff);
  --heys-bg-elevated: var(--v4-bg, #ffffff);
  --heys-bg-muted: var(--heys-neutral-100);
  --heys-bg-subtle: var(--heys-neutral-50);
  --heys-bg-primary: var(--heys-bg-card);
  --heys-bg-secondary: var(--heys-bg-muted);
  --heys-bg-tertiary: var(--heys-bg-elevated);

  /* Text */
  --heys-text-primary: var(--v4-ink, #111827);
  --heys-text-secondary: #6b7280;
  --heys-text-muted: var(--v4-ink-4, #9ca3af);
  --heys-text-inverted: var(--v4-bg, #ffffff);

  /* Короткие псевдонимы текстовых ролей.
   *
   * Были объявлены только внутри [data-theme$="dark"], поэтому в светлых темах
   * var(--text-primary) и соседи не разрешались вовсе. Где стоял запасной цвет
   * — рисовался он, где не стоял — текст оставался без цвета: 16 таких мест в
   * 730-widgets-dashboard.css, все на --text-tertiary, плюс 6 на --text-primary
   * и 7 на --text-secondary.
   *
   * Объявляем здесь, в :root: сами --heys-text-* уже темозависимы, поэтому
   * тёмная тема переопределит их сама и дублировать псевдонимы под неё не надо.
   * --text-tertiary заводится впервые и ложится на --heys-text-muted — это и
   * есть третий уровень контраста в наборе. */
  --text-primary: var(--heys-text-primary);
  --text-secondary: var(--heys-text-secondary);
  --text-tertiary: var(--heys-text-muted);

  /* Borders */
  --heys-border-default: var(--heys-neutral-200);
  --heys-border-focus: var(--heys-primary);
  --heys-border-subtle: var(--heys-neutral-100);

  /* ═══════════════════════════════════════════════════════════════════════════
   * NUTRITION COLORS (для графиков и показателей)
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Ratio zones (калории/норма) */
  --heys-ratio-crash: #ef4444;
  /* <50% - срыв недоел */
  --heys-ratio-low: #a16207;
  /* 50-75% - маловато (читаемо на светлых плитках) */
  --heys-ratio-good: #22c55e;
  /* 75-90% - хорошо */
  --heys-ratio-perfect: #10b981;
  /* 90-110% - идеально */
  --heys-ratio-over: #92400e;
  /* 110-130% - переел (читаемо на светлых плитках) */
  --heys-ratio-binge: #ef4444;
  /* >130% - срыв переел */

  /* Macros */
  --heys-protein: #3b82f6;
  /* фиолетовый */
  --heys-carbs: #f59e0b;
  /* оранжевый */
  --heys-fat: #3b82f6;
  /* синий */
  --heys-fiber: #22c55e;
  /* зелёный */

  /* Nutrient quality */
  --heys-good-fat: #22c55e;
  --heys-bad-fat: #f59e0b;
  --heys-trans-fat: #ef4444;
  --heys-simple-carbs: #f87171;
  --heys-complex-carbs: #4ade80;

  /* ═══════════════════════════════════════════════════════════════════════════
   * SPACING — 4px base grid
   * ═══════════════════════════════════════════════════════════════════════════ */

  --heys-space-0: 0;
  --heys-space-1: 4px;
  --heys-space-2: 8px;
  --heys-space-3: 12px;
  --heys-space-4: 16px;
  --heys-space-5: 20px;
  --heys-space-6: 24px;
  --heys-space-8: 32px;
  --heys-space-10: 40px;
  --heys-space-12: 48px;
  --heys-space-16: 64px;

  /* ═══════════════════════════════════════════════════════════════════════════
   * TYPOGRAPHY
   * ═══════════════════════════════════════════════════════════════════════════ */

  --heys-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --heys-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font sizes */
  --heys-text-xs: 0.75rem;
  /* 12px */
  --heys-text-sm: 0.875rem;
  /* 14px */
  --heys-text-base: 1rem;
  /* 16px */
  --heys-text-lg: 1.125rem;
  /* 18px */
  --heys-text-xl: 1.25rem;
  /* 20px */
  --heys-text-2xl: 1.5rem;
  /* 24px */
  --heys-text-3xl: 1.875rem;
  /* 30px */

  /* Line heights */
  --heys-leading-tight: 1.25;
  --heys-leading-normal: 1.5;
  --heys-leading-relaxed: 1.625;

  /* Font weights */
  --heys-font-normal: 400;
  --heys-font-medium: 500;
  --heys-font-semibold: 600;
  --heys-font-bold: 700;

  /* ═══════════════════════════════════════════════════════════════════════════
   * BORDERS & RADIUS
   * ═══════════════════════════════════════════════════════════════════════════ */

  --heys-radius-none: 0;
  --heys-radius-sm: 4px;
  --heys-radius-md: 8px;
  --heys-radius-lg: 12px;
  --heys-radius-xl: 16px;
  --heys-radius-2xl: 20px;
  --heys-radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════════════════════
   * SHADOWS
   * ═══════════════════════════════════════════════════════════════════════════ */

  --heys-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --heys-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --heys-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --heys-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ═══════════════════════════════════════════════════════════════════════════
   * TRANSITIONS
   * ═══════════════════════════════════════════════════════════════════════════ */

  --heys-transition-fast: 150ms ease;
  --heys-transition-base: 200ms ease;
  --heys-transition-slow: 300ms ease;
  --heys-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══════════════════════════════════════════════════════════════════════════
   * Z-INDEX SCALE
   * ═══════════════════════════════════════════════════════════════════════════ */

  --heys-z-dropdown: 100;
  --heys-z-sticky: 200;
  --heys-z-overlay: 300;
  --heys-z-modal: 400;
  --heys-z-popover: 500;
  --heys-z-toast: 600;
  --heys-z-tooltip: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DARK MODE OVERRIDES
 * ═══════════════════════════════════════════════════════════════════════════ */

.dark-theme,
[data-theme$="dark"] {
  /* ══════════════════════════════════
   * BACKGROUNDS — Темная палитра
   * ══════════════════════════════════ */
  --heys-bg-page: var(--v4-bg, #0f172a);
  /* Slate 900 - основной фон */
  --heys-bg-card: var(--v4-surface, #1e293b);
  /* Slate 800 - карточки */
  --heys-bg-elevated: #334155;
  /* Slate 700 - приподнятые элементы */
  --heys-bg-muted: var(--v4-surface, #1e293b);
  /* Slate 800 - приглушенный фон */
  --heys-bg-subtle: var(--v4-bg, #0f172a);
  /* Slate 900 - едва заметный фон */
  --heys-bg-primary: var(--heys-bg-card);
  --heys-bg-secondary: rgba(51, 65, 85, 0.88);
  --heys-bg-tertiary: var(--heys-bg-elevated);

  /* ══════════════════════════════════
   * TEXT — Улучшенная читаемость
   * ══════════════════════════════════ */
  --heys-text-primary: var(--v4-ink, #f1f5f9);
  /* Slate 100 - основной текст (высокий контраст) */
  --heys-text-secondary: #cbd5e1;
  /* Slate 300 - вторичный текст (средний контраст) */
  --heys-text-muted: var(--v4-ink-2, #94a3b8);
  /* Slate 400 - приглушенный текст (низкий контраст) */
  --heys-text-inverted: var(--v4-bg, #0f172a);
  /* Инверсия для кнопок и акцентов */

  /* ══════════════════════════════════
   * BORDERS — Видимые границы
   * ══════════════════════════════════ */
  --heys-border-default: var(--v4-ink-4, #475569);
  /* Slate 600 - основные границы (видимые) */
  --heys-border-subtle: var(--v4-line, #334155);
  /* Slate 700 - едва заметные границы */
  --heys-border-focus: #60a5fa;
  /* Blue 400 - фокус (яркий) */

  /* ══════════════════════════════════
   * SEMANTIC COLORS — Темная версия
   * ══════════════════════════════════ */
  /* Primary */
  --heys-primary: #60a5fa;
  /* Blue 400 - ярче для темного фона */
  --heys-primary-hover: #3b82f6;
  /* Blue 500 */
  --heys-primary-light: #93c5fd;
  /* Blue 300 */
  --heys-primary-bg: rgba(96, 165, 250, 0.15);

  /* Success */
  --heys-success: #4ade80;
  /* Green 400 - ярче для темного фона */
  --heys-success-hover: #22c55e;
  /* Green 500 */
  --heys-success-light: #86efac;
  /* Green 300 */
  --heys-success-bg: rgba(74, 222, 128, 0.15);

  /* Warning */
  --heys-warning: #fbbf24;
  /* Amber 400 - ярче для темного фона */
  --heys-warning-hover: #f59e0b;
  /* Amber 500 */
  --heys-warning-light: #fde047;
  /* Amber 300 */
  --heys-warning-bg: rgba(251, 191, 36, 0.15);

  /* Danger */
  --heys-danger: #f87171;
  /* Red 400 - ярче для темного фона */
  --heys-danger-hover: #ef4444;
  /* Red 500 */
  --heys-danger-light: #fca5a5;
  /* Red 300 */
  --heys-danger-bg: rgba(248, 113, 113, 0.15);

  /* Info */
  --heys-info: #60a5fa;
  /* Blue 400 */
  --heys-info-hover: #3b82f6;
  /* Blue 500 */
  --heys-info-light: #93c5fd;
  /* Blue 300 */
  --heys-info-bg: rgba(96, 165, 250, 0.15);

  /* ══════════════════════════════════
   * SHADOWS — Адаптированы для темной темы
   * ══════════════════════════════════ */
  --heys-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --heys-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --heys-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --heys-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.5);

  /* ══════════════════════════════════
   * NUTRITION — Адаптированные цвета
   * ══════════════════════════════════ */
  --heys-ratio-crash: #f87171;
  /* Red 400 */
  --heys-ratio-low: #fbbf24;
  /* Amber 400 */
  --heys-ratio-good: #4ade80;
  /* Green 400 */
  --heys-ratio-perfect: #34d399;
  /* Green 300 */
  --heys-ratio-over: #fbbf24;
  /* Amber 400 */
  --heys-ratio-binge: #f87171;
  /* Red 400 */

  --heys-protein: #60a5fa;
  /* Blue 400 */
  --heys-carbs: #fb923c;
  /* Orange 400 */
  --heys-fat: #60a5fa;
  /* Blue 400 */
  --heys-fiber: #4ade80;
  /* Green 400 */

  --heys-good-fat: #4ade80;
  --heys-bad-fat: #fb923c;
  --heys-trans-fat: #f87171;
  --heys-simple-carbs: #fca5a5;
  --heys-complex-carbs: #86efac;

  /* ══════════════════════════════════
   * BADGE & INLINE COMPONENT COLORS — Dark theme overrides
   * ══════════════════════════════════ */
  --mood-badge-bg: rgba(251, 191, 36, 0.2);
  --mood-badge-color: #fcd34d;
  --wellbeing-badge-bg: rgba(74, 222, 128, 0.2);
  --wellbeing-badge-color: #86efac;
  --stress-badge-bg: rgba(244, 114, 182, 0.2);
  --stress-badge-color: #f9a8d4;
  --info-badge-bg: rgba(96, 165, 250, 0.2);
  --info-badge-color: #93c5fd;
  --warning-badge-bg: rgba(251, 191, 36, 0.2);
  --warning-badge-color: #fcd34d;
  --bg-secondary: var(--heys-bg-elevated);
  --bg-tertiary: var(--heys-bg-elevated);
  --surface: var(--heys-bg-card);
  --text-primary: var(--heys-text-primary);
  --text-secondary: var(--heys-text-secondary);
  --flow-multi-bg: linear-gradient(135deg, #1e3a5f 0%, #2547a8 100%);

  /* Tinted subtle backgrounds (interceptor uses these) */
  --bg-success-subtle: rgba(16, 185, 129, 0.12);
  --bg-warning-subtle: rgba(251, 191, 36, 0.12);
  --bg-danger-subtle: rgba(239, 68, 68, 0.12);
  --bg-info-subtle: rgba(96, 165, 250, 0.12);
  --bg-pink-subtle: rgba(244, 114, 182, 0.12);
}