/* Фирменный стиль smixer: все цвета, отступы и размеры - только отсюда.
   Остальные CSS используют только эти переменные (CLAUDE.md).
   Описание системы и проверенный контраст - docs/DESIGN.md. */

:root {
  color-scheme: light;

  /* Бренд */
  --color-primary: #4F46E5;          /* индиго: кнопки, активные вкладки, фон выделенных элементов */
  --color-primary-hover: #4338CA;
  --color-primary-active: #3730A3;
  --color-on-primary: #FFFFFF;       /* текст на индиго */
  --color-link: #4F46E5;             /* ссылки и текст цвета бренда */
  --color-accent: #BE185D;           /* розовый из знака: карма, «Читать полностью», выделения */
  --color-accent-hover: #9D174D;
  --brand-cyan: #67E8F9;             /* линии знака на тёмном */
  --brand-pink: #F9A8D4;
  --brand-cyan-strong: #0891B2;      /* линии знака на светлом (только графика) */
  --brand-pink-strong: #DB2777;
  --logo-x-cyan: #0891B2;            /* буква «x» в слове логотипа: на светлом - насыщенные */
  --logo-x-pink: #DB2777;
  --gradient-brand: linear-gradient(135deg, #5B52F0, #3B2FC9);
  --gradient-space: linear-gradient(135deg, #1E1B4B, #0B0820);

  /* Светлая тема (по умолчанию) */
  --color-bg: #F7F7FB;
  --color-card: #FFFFFF;
  --color-surface-2: #F0F0F8;
  --color-text: #14122B;
  --color-text-secondary: #4B4A66;
  --color-muted: #6B6A85;
  --color-line: #E4E4EF;             /* декоративные рамки и разделители */
  --color-border: #E4E4EF;
  --color-border-strong: #CFCFE0;
  --color-border-input: #8A88A3;     /* рамки полей ввода: контраст не ниже 3:1 */
  --color-tag-bg: #EEF0FF;           /* мягкий индиго: чипы, выбранные элементы */
  --color-focus: #4F46E5;
  --color-selection: #C7D2FE;
  --color-overlay: rgba(20, 18, 43, 0.45);
  --shadow-card: 0 1px 2px rgba(20, 18, 43, 0.06);
  --shadow-pop: 0 6px 24px rgba(20, 18, 43, 0.14);

  /* Статусы */
  --color-success: #047857;
  --color-warning: #B45309;
  --color-danger: #C81E1E;
  --color-info: #0369A1;
  --color-success-bg: #ECFDF5;
  --color-warning-bg: #FFFBEB;
  --color-danger-bg: #FEF2F2;
  --color-info-bg: #F0F9FF;
  --color-violet: #7C3AED;
  --color-violet-bg: #F5F3FF;
  --color-danger-solid: #C81E1E;     /* фон опасной кнопки под белым текстом, обе темы */
  --color-danger-solid-hover: #A91B1B;

  /* Рубрики: цветная точка перед названием (декоративная, смысл несёт название) */
  --rubric-politika: #3B82F6;
  --rubric-economics: #10B981;
  --rubric-tech: #22D3EE;
  --rubric-nauka: #8B5CF6;
  --rubric-obchestvo: #FB923C;
  --rubric-kultura: #EC4899;
  --rubric-sport: #84CC16;
  --rubric-auto: #EF4444;
  --rubric-travel: #14B8A6;
  --rubric-yumor: #FBBF24;
  --rubric-internet: #0EA5E9;
  --rubric-space: #6366F1;
  --rubric-kino: #E11D48;
  --rubric-serials: #C026D3;
  --rubric-games: #7C3AED;
  --rubric-music: #DB2777;
  --rubric-books: #92400E;
  --rubric-health: #059669;
  --rubric-education: #2563EB;
  --rubric-food: #EA580C;
  --rubric-default: #8A88A3;

  /* Типографика */
  --font-family: "Onest", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: 16px;
  --font-size-l: 20px;
  --font-size-m: 17px;
  --font-size-s: 14px;
  --font-size-xs: 13px;
  --line-height: 1.55;

  /* Отступы и форма */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 14px;                    /* карточки */
  --radius-m: 12px;
  --radius-s: 9px;                   /* кнопки, поля, чипы */
  --radius-icon: 22%;                /* плитка знака и совместимость старых стилей */
  --content-width: 1680px;
  --sidebar-width: 320px;
  --touch: 40px; /* минимальный размер нажимаемого элемента */
}

/* Тёмная тема «космос». По умолчанию - системная, переключается атрибутом data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --logo-x-cyan: #67E8F9;
    --logo-x-pink: #F9A8D4;
    --color-primary-hover: #5B52F0;
    --color-link: #A5B4FC;
    --color-accent: #F472B6;
    --color-accent-hover: #F9A8D4;
    --color-bg: #0B0820;
    --color-card: #14112E;
    --color-surface-2: #1E1B4B;
    --color-text: #F5F3FF;
    --color-text-secondary: #B9B5DE;
    --color-muted: #8F8BB8;
    --color-line: #2E2A63;
    --color-border: #2E2A63;
    --color-border-strong: #433E85;
    --color-border-input: #6A66AE;
    --color-tag-bg: #26235A;
    --color-focus: #818CF8;
    --color-selection: #3B3A8C;
    --color-overlay: rgba(5, 3, 18, 0.65);
    --shadow-card: none;
    --shadow-pop: 0 6px 24px rgba(0, 0, 0, 0.45);
    --color-success: #34D399;
    --color-warning: #FBBF24;
    --color-danger: #F87171;
    --color-info: #7DD3FC;
    --color-success-bg: #1E1B4B;
    --color-warning-bg: #1E1B4B;
    --color-danger-bg: #1E1B4B;
    --color-info-bg: #1E1B4B;
    --color-violet: #C4B5FD;
    --color-violet-bg: #1E1B4B;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --logo-x-cyan: #67E8F9;
  --logo-x-pink: #F9A8D4;
  --color-primary-hover: #5B52F0;
  --color-link: #A5B4FC;
  --color-accent: #F472B6;
  --color-accent-hover: #F9A8D4;
  --color-bg: #0B0820;
  --color-card: #14112E;
  --color-surface-2: #1E1B4B;
  --color-text: #F5F3FF;
  --color-text-secondary: #B9B5DE;
  --color-muted: #8F8BB8;
  --color-line: #2E2A63;
  --color-border: #2E2A63;
  --color-border-strong: #433E85;
  --color-border-input: #6A66AE;
  --color-tag-bg: #26235A;
  --color-focus: #818CF8;
  --color-selection: #3B3A8C;
  --color-overlay: rgba(5, 3, 18, 0.65);
  --shadow-card: none;
  --shadow-pop: 0 6px 24px rgba(0, 0, 0, 0.45);
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-info: #7DD3FC;
  --color-success-bg: #1E1B4B;
  --color-warning-bg: #1E1B4B;
  --color-danger-bg: #1E1B4B;
  --color-info-bg: #1E1B4B;
  --color-violet: #C4B5FD;
  --color-violet-bg: #1E1B4B;
}