/* ═══════════════════════════════════════════════════════════════
   tokens.css - единый слой дизайн-токенов Mini App «Lioris»
   Трёхслойная система (big-design): primitive → semantic → component.
   Подключается ПЕРВЫМ <link> после fonts.css на всех страницах.
   В компонентах запрещены сырые hex/rgba - только var().
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ═══ PRIMITIVE - сырые значения ═══ */

  /* Фоны (от светлого к тёмному) */
  --p-bg-0: #030307;        /* фон страницы (космос) */
  --p-bg-void: #040209;     /* глубокий фон секций (.news) */
  --p-bg-1: #0B0B0F;        /* тёмная карточка */
  --p-bg-2: #0D0D0F;        /* sticky-шапки */
  --p-bg-3: #0f0f0f;        /* тёмный серый (календарь) */
  --p-bg-4: #1a1a1a;        /* светлее карточка */
  --p-bg-5: #1a1a2e;        /* dropdown / option */
  --p-bg-6: #252525;        /* самый светлый из поверхностей */

  /* Пурпур (бренд) */
  --p-purple-200: #c084fc;
  --p-purple-300: #a855f7;
  --p-purple-400: #a78bfa;
  --p-purple-500: #8b5cf6;
  --p-purple-600: #7c3aed;  /* главный акцент */
  --p-purple-800: #4c1d95;
  --p-purple-900: #3b0764;

  /* Чистый белый (градиенты текста, иконки на акценте) */
  --p-white: #ffffff;

  /* Розовый */
  --p-pink-400: #f472b6;
  --p-pink-500: #ec4899;    /* вторичный акцент */

  /* Индиго */
  --p-indigo-500: #6366f1;
  --p-indigo-600: #4f46e5;

  /* Синий / циан */
  --p-blue-400: #60a5fa;
  --p-blue-500: #3b82f6;
  --p-blue-600: #1d4ed8;
  --p-blue-700: #007aff;
  --p-blue-a12: rgba(59, 130, 246, 0.12);
  --p-cyan-400: #22d3ee;
  --p-cyan-500: #0891b2;

  /* Зелёный */
  --p-green-300: #4ade80;
  --p-green-400: #34d399;
  --p-green-500: #10b981;
  --p-green-600: #059669;
  --p-green-700: #22c55e;
  --p-green-800: #4caf50;

  /* Амбер / оранж */
  --p-amber-300: #eab308;
  --p-amber-400: #fbbf24;
  --p-amber-500: #f59e0b;
  --p-orange-400: #fb923c;
  --p-orange-500: #f97316;
  --p-orange-600: #ff9800;

  /* Красный */
  --p-red-400: #ff6b6b;
  --p-red-500: #ef4444;
  --p-red-600: #f44336;

  /* Нейтраль */
  --p-gray-50: #ffffff;
  --p-gray-100: #f6f8fa;
  --p-gray-200: #e5e8eb;
  --p-gray-300: #d1d5db;
  --p-gray-400: #9ca3af;
  --p-gray-500: #8e8e93;
  --p-gray-600: #6e7781;
  --p-gray-700: #6b7280;
  --p-gray-800: #4b5563;
  --p-gray-950: #1f2328;

  /* Альфа-белый (стекло) */
  --p-white: #fff;
  --p-white-a3: rgba(255, 255, 255, 0.03);
  --p-white-a4: rgba(255, 255, 255, 0.04);
  --p-white-a5: rgba(255, 255, 255, 0.05);
  --p-white-a6: rgba(255, 255, 255, 0.06);
  --p-white-a8: rgba(255, 255, 255, 0.08);
  --p-white-a10: rgba(255, 255, 255, 0.10);
  --p-white-a12: rgba(255, 255, 255, 0.12);
  --p-white-a15: rgba(255, 255, 255, 0.15);
  --p-white-a18: rgba(255, 255, 255, 0.18);
  --p-white-a20: rgba(255, 255, 255, 0.20);
  --p-white-a25: rgba(255, 255, 255, 0.25);
  --p-white-a30: rgba(255, 255, 255, 0.30);
  --p-white-a35: rgba(255, 255, 255, 0.35);
  --p-white-a40: rgba(255, 255, 255, 0.40);
  --p-white-a45: rgba(255, 255, 255, 0.45);
  --p-white-a55: rgba(255, 255, 255, 0.55);
  --p-white-a70: rgba(255, 255, 255, 0.70);
  --p-white-a80: rgba(255, 255, 255, 0.80);
  --p-white-a85: rgba(255, 255, 255, 0.85);

  /* Альфа-пурпур / розовый (акцентные стеклянные слои) */
  --p-purple-a05: rgba(168, 85, 247, 0.03);
  --p-purple-a08: rgba(168, 85, 247, 0.06);
  --p-purple-a10: rgba(168, 85, 247, 0.10);
  --p-purple-a12: rgba(124, 58, 237, 0.12);
  --p-purple-a15: rgba(168, 85, 247, 0.15);
  --p-purple-a20: rgba(168, 85, 247, 0.20);
  --p-purple-a28: rgba(168, 85, 247, 0.28);
  --p-purple-a35: rgba(168, 85, 247, 0.35);
  --p-purple-a50: rgba(168, 85, 247, 0.50);
  --p-purple-a55: rgba(168, 85, 247, 0.55);
  --p-pink-a5: rgba(236, 72, 153, 0.05);
  --p-pink-a10: rgba(236, 72, 153, 0.10);
  --p-pink-a18: rgba(236, 72, 153, 0.18);

  /* Градиенты-примитивы */
  --p-grad-nav-active: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%);
  --p-grad-brand: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --p-grad-pink-purple: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  --p-grad-community: linear-gradient(90deg, #1d4ed8 0%, #7c3aed 50%, #ec4899 100%);
  --p-grad-success: linear-gradient(135deg, #10b981, #34d399);
  --p-grad-success-btn: linear-gradient(135deg, #10b981, #059669);
  --p-grad-purple-btn: linear-gradient(135deg, #a855f7, #7c3aed);
  --p-grad-card: linear-gradient(145deg, rgba(16, 10, 36, 0.5), rgba(8, 5, 20, 0.65));

  /* ═══ SEMANTIC - канонический слой ═══ */

  /* Цвет фона и поверхностей */
  --color-bg: var(--p-bg-0);
  --color-bg-deep: var(--p-bg-void);
  --color-surface: var(--p-bg-1);
  --color-surface-2: var(--p-bg-2);
  --color-surface-3: var(--p-bg-4);
  --color-surface-4: var(--p-bg-6);
  --color-dropdown: var(--p-bg-5);
  --color-glass: var(--p-white-a4);
  --color-glass-hover: var(--p-white-a8);

  /* Текст */
  --color-text: var(--p-gray-50);
  --color-text-muted: var(--p-gray-500);
  --color-text-soft: var(--p-gray-400);
  --color-text-faint: var(--p-gray-700);

  /* Границы и свет (Apple Liquid Dark Glass - свет только сверху) */
  --color-border: transparent;
  --color-border-subtle: transparent;
  --color-border-top: transparent;
  --color-border-bottom: transparent;
  --color-border-strong: transparent;
  --color-border-accent: transparent;
  --color-border-accent-top: transparent;
  --color-border-accent-bottom: transparent;

  --shadow-card: 0 12px 32px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
  --shadow-card-hover: 0 18px 40px -4px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.22);
  --shadow-glass-btn: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
  --shadow-glass-btn-hover: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.22);

  /* Акценты */
  --color-accent: var(--p-purple-600);
  --color-accent-hover: var(--p-purple-500);
  --color-accent-soft: var(--p-purple-a12);
  --color-accent-2: var(--p-pink-500);
  --color-accent-glow: var(--p-purple-300);
  --color-accent-border: rgba(168, 85, 247, 0.4);
  --color-accent-glow-shadow: var(--p-purple-a15);
  --color-focus: var(--p-purple-400);

  /* Статусы */
  --color-success: var(--p-green-500);
  --color-success-strong: var(--p-green-600);
  --color-success-light: var(--p-green-300);
  --color-warning: var(--p-amber-500);
  --color-warning-light: var(--p-amber-400);
  --color-danger: var(--p-red-500);
  --color-danger-strong: var(--p-red-600);
  --color-success-glow: #0a1a0d;   /* фоновое свечение страницы успеха */
  --color-danger-glow: #1a0d0d;    /* фоновое свечение страницы ошибки */
  --color-info: var(--p-blue-500);
  --color-info-light: var(--p-blue-400);

  /* Платформы соцсетей */
  --platform-tg: var(--p-platform-tg);
  --platform-ig: var(--p-platform-ig);
  --platform-vk: var(--p-platform-vk);
  --platform-yt: var(--p-platform-yt);

  /* ═══ ШКАЛЫ ═══ */

  /* Spacing - 4px-база */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-90: 90px;              /* зазор под bottom-nav */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 26px;
  --radius-full: 999px;

  /* Типографика */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'Fira Code', Consolas, monospace;
  --text-8: 8px;
  --text-9: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-13: 13px;
  --text-md: 14px;
  --text-15: 15px;
  --text-base: 16px;
  --text-17: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-22: 22px;
  --text-2xl: 24px;
  --text-26: 26px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-6xl: 48px;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --fw-300: 300;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-none: 1;
  --leading-tighter: 1.1;
  --leading-snug: 1.3;
  --leading-base: 1.4;
  --tracking-tight: -0.01em;
  --tracking-tighter: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.1em;

  /* Тени */
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.65);
  --shadow-nav: 0 -16px 40px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 20px rgba(168, 85, 247, 0.2);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.85);

  /* ═══ MASTER GLASS CARD & CONTROL TOKENS (LIORIS STANDARD) ═══ */
  --glass-card-bg: linear-gradient(155deg, rgba(20, 14, 45, 0.6) 0%, rgba(10, 6, 24, 0.75) 100%);
  --glass-card-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-card-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
  --glass-card-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.55);
  --glass-card-radius: 22px;
  --glass-card-blur: 20px;
  --glass-row-divider: 1px solid rgba(255, 255, 255, 0.07);

  --glass-control-bg: rgba(255, 255, 255, 0.05);
  --glass-control-border: 1px solid rgba(255, 255, 255, 0.12);
  --glass-control-radius: 12px;
  --glass-control-color: #ffffff;

  --glass-cta-primary-bg: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%);
  --glass-cta-primary-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);
  --glass-cta-primary-radius: 14px;

  /* Контейнер */
  --container-max: 672px;
  --container-pad-x: var(--space-6);
  --space-bottom-nav: var(--space-90);
  --bottom-nav-height: 70px;

  /* Кнопки */
  --btn-pad-y: 10px;
  --btn-pad-x: 20px;
  --btn-radius: 12px;
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-text: var(--color-text);
  --gradient-success-btn: var(--p-grad-success-btn);

  /* Поля ввода */
  --field-bg: var(--color-glass);
  --field-border: var(--color-border);
  --field-radius: 12px;
  --field-padding: 11px 14px;
  --field-focus-border: var(--color-accent);
  --field-bg-focus: rgba(255, 255, 255, 0.08);
  /* Канонический шеврон нативного select (12px, как у select.field) */
  --field-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba%28255,255,255,0.4%29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* Кнопка «назад» (канон 40×40/r14/svg18 - без обводки) */
  --back-btn-size: 40px;
  --back-btn-radius: 14px;
  --back-btn-icon-size: 18px;
  --back-btn-pad: 10px 18px;
  --back-btn-bg: rgba(255, 255, 255, 0.06);
  --back-btn-border: none;

  /* Bottom-nav */
  --nav-active-gradient: var(--p-grad-nav-active);
  --nav-item-active-bg: linear-gradient(135deg, rgba(124, 90, 237, 0.1), rgba(236, 72, 153, 0.1));

  /* Кнопки - размеры и вариации (канон в категории) */
  --btn-pad-y-sm: 7px;
  --btn-pad-x-sm: 14px;
  --btn-pad-y-lg: 14px;
  --btn-pad-x-lg: 28px;
  --btn-radius-sm: 12px;
  --btn-radius-lg: var(--radius-xl);
  --btn-radius-pill: var(--radius-full);
  --btn-font-size: var(--text-md);
  --btn-font-weight: var(--fw-500);
  --btn-font-size-sm: var(--text-sm);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: var(--color-glass-hover);
  --btn-ghost-color: var(--color-text-soft);
  --btn-danger-bg: var(--color-danger);
  --btn-danger-bg-hover: var(--color-danger-strong);
  --btn-success-bg: var(--color-success);
  --btn-success-bg-hover: var(--color-success-strong);
  --btn-icon-size-sm: 28px;
  --btn-icon-size-md: 36px;
  --btn-icon-size-lg: 40px;
  --btn-icon-size-xl: 56px;
  --btn-icon-radius: var(--radius-lg);
  --btn-icon-svg-size: 18px;

  /* Дропдауны (меню) - канон */
  --dropdown-radius: var(--radius-xl);
  --dropdown-item-pad: 10px 14px;
  --dropdown-item-radius: var(--radius-md);
  --dropdown-max-height: 250px;
  --dropdown-anchor-offset: 6px;
  --dropdown-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* Иконки - канонические размеры */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* Стрелки / шевроны */
  --chevron-size: 16px;
  --chevron-rotate: 180deg;
  --chevron-link-size: 14px;
  --chevron-link-shift: 2px;

  /* Бейджи */
  --badge-pad: 3px 10px;
  --badge-radius: var(--radius-full);
  --badge-radius-sm: 6px;
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--fw-600);

  /* Тогглы (переключатели) */
  --toggle-w: 38px;
  --toggle-h: 22px;
  --toggle-knob: 16px;
  --toggle-translate: 16px;
  --toggle-radius: var(--radius-full);
  --toggle-bg: var(--color-glass);
  --toggle-bg-on: var(--color-accent);

  /* Табы / segmented control */
  --tab-container-pad: 4px;
  --tab-container-radius: var(--radius-xl);
  --tab-item-pad: 8px 12px;
  --tab-item-radius: var(--radius-md);
  --tab-font-size: var(--text-13);
  --tab-font-weight: var(--fw-600);

  /* ═══ LEGACY-АЛИАСЫ - для уже существующих потребителей ═══ */
  /* (сохраняют прежние значения; новый код использует --color-*) */
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-light: var(--color-accent-soft);
  --accent-2: var(--color-accent-2);
  --accent-glow: var(--color-accent-glow);
  --accent-border: var(--color-accent-border);
  --accent-glow-shadow: var(--color-accent-glow-shadow);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-soft);
  --text-muted: var(--color-text-muted);
  --text-tertiary: var(--color-text-faint);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --border-accent: var(--color-border-accent);
  --bg-card: var(--color-glass);   /* прозрачное стекло (было rgba(255,255,255,0.04)) */
  --bg: var(--p-white-a3);         /* прозрачное стекло (было rgba(255,255,255,0.03)) */
  --bg-void: var(--color-bg-deep);
  --success: var(--color-success);
  --success-strong: var(--color-success-strong);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
}

/* Платформы (примитивы) - в конце, чтобы не путать с семантическими */
:root {
  --p-platform-tg: #2AABEE;
  --p-platform-ig: #E4405F;
  --p-platform-vk: #0077FF;
  --p-platform-yt: #FF0000;
}