/**
 * Единственный источник дизайн-токенов. Ни в одном другом CSS-файле
 * не должно быть литерального цвета, px-размера шрифта/радиуса/отступа —
 * только var(--...). Проверяется tests/css_lint.php.
 * Источник: docs/10_Проект_с_нуля_Архитектура.md, раздел 7.1.
 */
:root {
  /* ── Цвет: бренд ── */
  --primary: #0D4F4F;
  --primary-light: #1A7A7A;
  --primary-dark: #093A3A;
  --accent: #14B8A6;
  --accent-light: #5EEAD4;
  --accent-dark: #0F766E;

  /* ── Цвет: поверхности (светлая тема по умолчанию) ── */
  --bg: #F0FDFA;
  --bg-alt: #E6F7F3;
  --surface: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, .7);
  --text: #1E293B;
  --text-secondary: #64748B;
  --text-light: #94A3B8;
  --border: #E2E8F0;

  /* ── Цвет: статусы ── */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;

  /* ── Цвет: доп. оттенки, используемые в макетах экранов ── */
  --border-subtle: #F1F5F9;
  --text-disabled: #CBD5E1;
  --text-muted: #475569;
  --overlay-scrim: rgba(15, 25, 35, .6);
  --success-light: #6EE7B7;
  --on-primary: #FFFFFF;

  /* ── Цвет: alpha-варианты бренда/статусов для колец фокуса, спиннеров, подсветок ── */
  --on-primary-a40: rgba(255, 255, 255, .4);
  --accent-a06: rgba(20, 184, 166, .06);
  --accent-a30: rgba(20, 184, 166, .3);
  --danger-a15: rgba(239, 68, 68, .15);
  --success-a15: rgba(16, 185, 129, .15);
  --on-primary-a85: rgba(255, 255, 255, .85);
  --on-primary-a55: rgba(255, 255, 255, .55);
  --on-primary-a18: rgba(255, 255, 255, .18);
  --focus-ring-accent: rgba(20, 184, 166, .15);
  --focus-ring-danger: rgba(239, 68, 68, .15);
  --focus-ring-success: rgba(16, 185, 129, .15);
  --paywall-selected-bg: rgba(20, 184, 166, .06);
  --danger-rgb: 239, 68, 68;

  /* ── Цвет: входная группа (тёмная поверх тёмного градиента, docs/08 2.1) ── */
  --entry-text: #F0FDFA;
  --entry-text-a68: rgba(226, 232, 240, .68);
  --entry-text-a75: rgba(226, 232, 240, .75);
  --entry-text-a55: rgba(226, 232, 240, .55);
  --entry-text-a45: rgba(226, 232, 240, .45);
  --entry-text-a80: rgba(226, 232, 240, .8);
  --entry-surface-a06: rgba(255, 255, 255, .06);
  --entry-surface-a08: rgba(255, 255, 255, .08);
  --entry-surface-a12: rgba(255, 255, 255, .12);
  --entry-surface-a16: rgba(255, 255, 255, .16);
  --entry-surface-a25: rgba(255, 255, 255, .25);
  --entry-ring-a35: rgba(94, 234, 212, .35);
  --entry-ring-a60: rgba(94, 234, 212, .6);
  --fs-entry-title: 28px;
  --fs-entry-body: 17px;
  --entry-scrim: rgba(9, 20, 26, .6);
  --entry-surface-solid: #1E2D3D;
  --danger-a55: rgba(239, 68, 68, .55);
  --danger-text-on-dark: #FEE2E2;
  --accent-glow-a30: rgba(94, 234, 212, .3);
  --accent-glow-a12: rgba(20, 184, 166, .12);
  --accent-glow-a18: rgba(20, 184, 166, .18);
  --accent-ring-a16: rgba(94, 234, 212, .16);
  --accent-ring-a30: rgba(94, 234, 212, .3);
  --entry-surface-a72: rgba(30, 45, 61, .72);
  --entry-surface-a75: rgba(30, 45, 61, .75);
  --entry-surface-a45: rgba(30, 45, 61, .45);
  --on-primary-a10: rgba(255, 255, 255, .1);

  /* ── Цвет: мягкие статусные подложки (баннер тяги, метка тяги на главном) ── */
  --success-soft-bg: #ECFDF5;
  --success-soft-text: #047857;
  --warning-soft-bg: #FFFBEB;
  --warning-soft-text: #92400E;
  --warning-soft-thumb-text: #B45309;
  --danger-soft-bg-dark: rgba(239, 68, 68, .12);
  --danger-soft-bg-dark-strong: rgba(239, 68, 68, .14);
  --danger-soft-border-dark: rgba(239, 68, 68, .5);
  --danger-soft-text-dark: #FCA5A5;
  --accent-tag-selected-text: #0D4F4F;
  --accent-glow-a35: rgba(94, 234, 212, .35);
  --accent-glow-a25: rgba(94, 234, 212, .25);
  --accent-a06-solid: #E6F7F3;
  --accent-a12: rgba(20, 184, 166, .12);
  --accent-a14: rgba(20, 184, 166, .14);
  --accent-glow-a50: rgba(94, 234, 212, .5);
  --accent-glow-a40: rgba(94, 234, 212, .4);
  --danger-glow-a45: rgba(239, 68, 68, .45);
  --danger-glow-a30: rgba(239, 68, 68, .3);
  --danger-glow-a50: rgba(239, 68, 68, .5);
  --overlay-track-dark: rgba(45, 63, 82, .7);
  --primary-glow-a18: rgba(13, 79, 79, .18);
  --primary-a45: rgba(9, 58, 58, .6);
  --primary-a06: rgba(13, 79, 79, .06);

  /* ── Размеры: сосуд и кольцо прогресса главного экрана ── */
  --vessel-w: 182px;
  --vessel-h: 262px;
  --vessel-radius: 44% 44% 50% 50% / 26% 26% 46% 46%;
  --ring-size: 298px;
  --ring-glow-size: 340px;
  --mini-ring-size: 26px;
  --calendar-cell-size: 34px;
  --slider-thumb-size: 34px;

  /* ── Градиенты ── */
  --gradient-liquid: linear-gradient(180deg, #5EEAD4 0%, #14B8A6 45%, #0D4F4F 100%);
  --gradient-entry: linear-gradient(180deg, #093A3A 0%, #0D4F4F 55%, #0F1923 100%);
  /* Подложка липкого блока кнопок: снизу совпадает с концом --gradient-entry,
     кверху растворяется, чтобы контент уходил под кнопки мягко, без обрыва. */
  --gradient-entry-actions: linear-gradient(180deg, rgba(15, 25, 35, 0) 0%, #0F1923 42%);
  --gradient-card-accent: linear-gradient(160deg, #5EEAD4, #14B8A6 45%, #0D4F4F);
  --gradient-drop: linear-gradient(180deg, #5EEAD4, #0D4F4F);
  --gradient-forever-drop: linear-gradient(180deg, #9BF5E6, #14B8A6 45%, #093A3A);
  --gradient-award-glow: radial-gradient(circle at 50% 88%, #0F4A4A, #0B1420 65%);
  --gradient-sos-card: linear-gradient(135deg, #0F766E, #0D4F4F);
  --sos-card-glow: 0 0 24px rgba(20, 184, 166, .35);
  /* Иконки-блобы каталога продуктов /app/catalog (design/catalog-*.html) */
  --gradient-catalog-family: linear-gradient(150deg, #1A7A7A, #0D4F4F);
  --gradient-catalog-donate: linear-gradient(150deg, #FCD34D, #B45309);
  --sos-card-glow-soft: 0 0 28px rgba(20, 184, 166, .28);

  /* ── Цвет: вехи/достижения, тепловая карта, планы триггеров ── */
  --milestone-glow: rgba(94, 234, 212, .4);
  --milestone-glow-strong: rgba(94, 234, 212, .55);
  --milestone-glow-soft: rgba(94, 234, 212, .6);
  --heat-cool: rgba(94, 234, 212, .12);
  --heat-warm: rgba(245, 158, 11, .35);
  --heat-hot: rgba(239, 68, 68, .55);
  --heat-peak: rgba(239, 68, 68, .85);
  --safe-zone-bg: rgba(16, 185, 129, .12);
  --safe-zone-border: rgba(16, 185, 129, .4);
  --combo-risk-border: rgba(239, 68, 68, .5);
  --combo-safe-border: rgba(16, 185, 129, .5);
  --plan-accent-border: rgba(94, 234, 212, .35);
  --plan-accent-tag-border: rgba(94, 234, 212, .4);

  /* ── Цвет: SOS-хаб, дыхание, плеер капсулы (тёмный экран, docs/02 5.6) ── */
  --sos-bg-gradient: linear-gradient(180deg, #093A3A, #0F1923 75%);
  --sos-ring-track: rgba(255, 255, 255, .10);
  --sos-danger-border: rgba(239, 68, 68, .45);
  --sos-plan-border: rgba(94, 234, 212, .5);
  --sos-avatar-a: #0F766E;
  --sos-avatar-b: #1A7A7A;
  --breathe-bg-inhale: radial-gradient(circle at 50% 42%, #0F3A3A, #0F1923 70%);
  --breathe-bg-hold: radial-gradient(circle at 50% 42%, #12494A, #0F1923 72%);
  --breathe-bg-exhale: radial-gradient(circle at 50% 42%, #0D3131, #0F1923 70%);
  --breathe-halo: rgba(94, 234, 212, .35);
  --breathe-halo-hold: rgba(94, 234, 212, .45);
  --breathe-halo-exhale: rgba(94, 234, 212, .22);
  --breathe-orb: radial-gradient(circle at 40% 35%, #5EEAD4, #0F766E);
  --breathe-orb-hold: radial-gradient(circle at 40% 35%, #9BF5E6, #14B8A6 60%, #0F766E);
  --breathe-orb-exhale: radial-gradient(circle at 40% 35%, #5EEAD4, #0D4F4F);
  --breathe-orb-glow: 0 0 50px rgba(20, 184, 166, .55);
  --breathe-orb-glow-hold: 0 0 90px rgba(94, 234, 212, .65);
  --breathe-orb-glow-exhale: 0 0 40px rgba(20, 184, 166, .4);
  --capsule-waveform-dim: #2D3F52;

  /* ── Цвет: режим близкого (docs/13 раздел 2.5, отдельный светлый тон) ── */
  --gradient-family-bg: linear-gradient(180deg, #FBFDF9 0%, #EDF7F1 55%, #E4F2EC 100%);
  --shadow-card-sm: 0 4px 12px rgba(0, 0, 0, .06);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, .08);
  --surface-a90: rgba(255, 255, 255, .9);

  /* ── Отступы (сетка 4pt) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --screen-padding: 20px;

  /* ── Радиусы ── */
  --radius-xs: 2px;
  --radius-bar: 3px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ── Типографика ── */
  --font: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-h1: 32px;
  --fs-h1-sm: 30px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-caption: 13px;
  --fs-micro: 11px;
  --fs-hero: 72px;
  --fs-nano: 8px;
  --fs-tiny: 10px;
  --fs-sub-h1: 27px;
  --fs-display: 44px;
  --fs-callout: 15px;
  --fs-stat-value: 17px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ── Тень и свечение ── */
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);
  --shadow-glow: 0 0 20px rgba(20, 184, 166, .15);
  --shadow-glow-strong: 0 0 30px rgba(20, 184, 166, .45);

  /* ── Движение ── */
  --transition: .3s cubic-bezier(.4, 0, .2, 1);
  --transition-fast: .15s cubic-bezier(.4, 0, .2, 1);
  /* Тайминг переключателей (toggle) — по эталону design/prototype.js: .18s ease */
  --transition-toggle: .18s ease;

  /* ── Размеры интерфейса ── */
  --tap: 44px;
  --btn-h: 56px;
  --input-h: 56px;
  --fab: 64px;
  --tabbar-h: 64px;
  --avatar-sm: 36px;
  --avatar-md: 40px;
  --avatar-lg: 78px;
  --icon-btn: 26px;

  /* ── Z-индексы ── */
  --z-tabbar: 100;
  --z-fab: 110;
  --z-sheet: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── Админка: поверхности и сетка (docs/06, макеты design/admin-*.html) ── */
  --admin-surface-2: #F8FAFC;
  --admin-text-2: #64748B;
  --admin-text-3: #94A3B8;
  --admin-shadow: 0 4px 12px rgba(0, 0, 0, .10);
  --admin-glow: 0 0 20px rgba(20, 184, 166, .15);
  --admin-tint: rgba(20, 184, 166, .10);
  --admin-row-hover: rgba(20, 184, 166, .06);
  --admin-sidebar-w: 260px;
  --admin-topbar-h: 64px;
  --admin-shell-w: 1440px;
  --admin-shell-min-h: 900px;

  /* ── Админка: тёмная тема — переопределения (docs/06, макет тёмной темы) ── */
  --admin-dark-accent-dark: #5EEAD4;
  --admin-dark-shadow: 0 4px 14px rgba(0, 0, 0, .36);
  --admin-dark-tint: rgba(20, 184, 166, .14);
  --admin-dark-row-hover: rgba(94, 234, 212, .07);

  /* ── Админка: статусные бейджи и KPI ── */
  --admin-badge-pro: linear-gradient(90deg, #14B8A6, #5EEAD4);
  --admin-badge-pro-text: #0B2C2C;
  --admin-badge-fam: linear-gradient(90deg, #0F766E, #14B8A6);
  --admin-badge-forever: linear-gradient(90deg, #093A3A, #0F766E);
  --admin-badge-forever-text: #CFFAF0;
  --admin-badge-forever-glow: 0 0 14px rgba(94, 234, 212, .3);
  --admin-badge-forever-border: rgba(94, 234, 212, .5);
  --admin-badge-donor: linear-gradient(90deg, #F59E0B, #FCD34D);
  --admin-badge-donor-text: #7C2D12;
  --admin-badge-ok-bg: rgba(16, 185, 129, .14);
  --admin-badge-ok-text: #0E9F6E;
  --admin-badge-warn-bg: rgba(245, 158, 11, .16);
  --admin-badge-warn-text: #B45309;
  --admin-badge-err-bg: rgba(239, 68, 68, .14);
  --admin-badge-err-text: #DC2626;
  --admin-badge-info-bg: rgba(59, 130, 246, .14);
  --admin-badge-info-text: #2563EB;
  --admin-dark-badge-ok-text: #6EE7B7;
  --admin-dark-badge-warn-text: #FCD34D;
  --admin-dark-badge-err-text: #FCA5A5;
  --admin-dark-badge-info-text: #93C5FD;
  --admin-kpi-warn-border: rgba(245, 158, 11, .6);
  --admin-kpi-err-border: rgba(239, 68, 68, .65);
  --admin-note-warn-bg: rgba(245, 158, 11, .12);
  --admin-note-warn-border: rgba(245, 158, 11, .5);
  --admin-note-warn-text: #B45309;
  --admin-note-err-bg: rgba(239, 68, 68, .1);
  --admin-note-err-border: rgba(239, 68, 68, .5);
  --admin-note-err-text: #DC2626;
  --admin-note-ok-bg: rgba(16, 185, 129, .1);
  --admin-note-ok-border: rgba(16, 185, 129, .45);
  --admin-note-ok-text: #0E9F6E;
  --admin-dark-note-warn-text: #FCD34D;
  --admin-dark-note-err-text: #FCA5A5;
  --admin-dark-note-ok-text: #6EE7B7;
  --admin-focus-ring: 0 0 0 3px rgba(20, 184, 166, .14);
  --admin-drop-gradient: linear-gradient(180deg, #5EEAD4, #14B8A6 50%, #0D4F4F);
  --admin-danger-rgba07: rgba(239, 68, 68, .07);
  --admin-success-rgba07: rgba(16, 185, 129, .07);

  /* ── Админка: размеры/типографика элементов интерфейса ── */
  --fs-admin-nano: 9px;
  --fs-admin-micro: 10px;
  --fs-admin-micro2: 10.5px;
  --fs-admin-tiny: 11px;
  --fs-admin-tiny2: 11.5px;
  --fs-admin-caption: 12px;
  --fs-admin-caption2: 12.5px;
  --fs-admin-body: 13px;
  --fs-admin-body2: 13.5px;
  --fs-admin-callout: 14px;
  --fs-admin-callout2: 15px;
  --fs-admin-h3: 17px;
  --fs-admin-h2: 18px;
  --fs-admin-h1: 20px;
  --fs-admin-hero: 22px;
  --fs-admin-display: 24px;
  --fs-admin-display2: 26px;
  --radius-admin-xs: 3px;
  --radius-admin-sm: 5px;
  --radius-admin-md: 6px;

  /* ── Админ-PWA (design/pwa.css): маска капли-логотипа ── */
  --mask-drop: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA0MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZD0iTTE1IDFDMTUgMSAyNyAxOS42IDI3IDI2LjZBMTIgMTIgMCAwMTMgMjYuNkMzIDE5LjYgMTUgMSAxNSAxeiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==");
}

/* ── Тёмная тема: авто по системе ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1923;
    --bg-alt: #162231;
    --surface: #1E2D3D;
    --surface-glass: rgba(30, 45, 61, .8);
    --text: #E2E8F0;
    --text-secondary: #94A3B8;
    --text-light: #64748B;
    --border: #2D3F52;
    --border-subtle: #2D3F52;
    --text-disabled: #475569;
    --text-muted: #475569;
  }
}

/* ── Тёмная тема: ручной переключатель ── */
:root[data-theme="dark"] {
  --bg: #0F1923;
  --bg-alt: #162231;
  --surface: #1E2D3D;
  --surface-glass: rgba(30, 45, 61, .8);
  --text: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-light: #64748B;
  --border: #2D3F52;
  --border-subtle: #2D3F52;
  --text-disabled: #475569;
  --text-muted: #475569;
}

/* ── Админка: тёмная тема — те же переопределения, что и для системной ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --admin-surface-2: #162231;
    --admin-text-2: #94A3B8;
    --admin-text-3: #64748B;
    --admin-shadow: var(--admin-dark-shadow);
    --admin-tint: var(--admin-dark-tint);
    --admin-row-hover: var(--admin-dark-row-hover);
  }
}
:root[data-theme="dark"] {
  --admin-surface-2: #162231;
  --admin-text-2: #94A3B8;
  --admin-text-3: #64748B;
  --admin-shadow: var(--admin-dark-shadow);
  --admin-tint: var(--admin-dark-tint);
  --admin-row-hover: var(--admin-dark-row-hover);
}