/* === IVSOFTE Design System === */

:root,
[data-theme="dark"] {
  /* Colors */
  --color-bg: #0b0f19;
  --color-bg-secondary: #111827;
  --color-card: #1a1f2e;
  --color-card-hover: #232839;
  --color-border: #2d3348;
  /* Граница интерактивных элементов (WCAG 1.4.11, 3:1). Парный токен есть и в светлой теме */
  --color-border-strong: #55607f;
  --color-accent: #d4a853;
  --color-accent-hover: #e0b96a;
  --color-text: #e5e7eb;
  --color-text-secondary: #9ca3af;
  /* #6b7280 давал 3.40:1 на --color-card и 3.03:1 на --color-card-hover — ниже AA.
     Каждый агент, дорабатывавший страницы 25.07, был вынужден вручную поднимать
     третичные подписи до --color-text-secondary, из-за чего типографическая иерархия
     в тёмной теме схлопывалась. #8892a4 проходит AA на всех трёх поверхностях
     (6.10 / 5.23 / 4.67) и при этом остаётся заметно тише secondary (7.54 / 6.47). */
  --color-text-muted: #8892a4;
  --color-buy: #22c55e;
  --color-buy-hover: #16a34a;
  --color-danger: #ef4444;
  --color-link: #60a5fa;
  --color-link-hover: #93bbfd;
  --color-text-on-accent: #000;
  --color-deals: #4ade80;
  --color-deals-hover: #22c55e;
  --color-market: #38bdf8;
  --color-market-hover: #7dd3fc;
  --color-market-a10: rgba(56, 189, 248, 0.1);
  --color-market-a20: rgba(56, 189, 248, 0.2);
  --color-warning: #eab308;
  --color-success: #4ade80;
  --color-danger-light: #f87171;
  --color-accent-gold: #f0d080;
  --color-accent-dark: #c49a3e;

  /* Accent alpha channel variants (gold rgba(212,168,83,...)) */
  --color-accent-a4: rgba(212, 168, 83, 0.04);
  --color-accent-a5: rgba(212, 168, 83, 0.05);
  --color-accent-a8: rgba(212, 168, 83, 0.08);
  --color-accent-a10: rgba(212, 168, 83, 0.1);
  --color-accent-a12: rgba(212, 168, 83, 0.12);
  --color-accent-a15: rgba(212, 168, 83, 0.15);
  --color-accent-a20: rgba(212, 168, 83, 0.2);
  --color-accent-a25: rgba(212, 168, 83, 0.25);
  --color-accent-a30: rgba(212, 168, 83, 0.3);
  --color-accent-a35: rgba(212, 168, 83, 0.35);
  --color-accent-a40: rgba(212, 168, 83, 0.4);

  /* Buy / green alpha */
  --color-buy-a30: rgba(34, 197, 94, 0.3);

  /* Danger alpha */
  --color-danger-a8: rgba(239, 68, 68, 0.08);
  --color-danger-a25: rgba(239, 68, 68, 0.25);

  /* Status semantics (reuses existing palette values) */
  --color-status-working: #22c55e;
  --color-status-working-light: #4ade80;
  --color-status-updating: #f59e0b;
  --color-status-updating-light: #fbbf24;
  --color-status-testing: #facc15;
  --color-status-testing-light: #fde047;
  /* Neutral information state: sales can remain open, but a recent technical
     confirmation is missing. Keep it visually separate from yellow/orange alerts. */
  --color-status-checking: #38bdf8;
  --color-status-checking-light: #7dd3fc;
  --color-status-error: #ef4444;
  --color-status-error-light: #f87171;
  --color-status-unknown: #6b7280;
  --color-status-orange: #f97316;
  --color-info: #60a5fa;
  --color-info-light: #a5b4fc;

  --color-overlay: rgba(0, 0, 0, 0.5);
  /* 0.85 был слишком прозрачным: на длинных страницах (/partners/) карточки
     просвечивали сквозь sticky-шапку поверх стека `isolation: isolate`,
     потому что backdrop-filter живёт на ::after с z-index:-1 и блюрит
     только внутренний фон, а не контент снаружи. Поднимаем до 0.96. */
  --color-header-bg: rgba(11, 15, 25, 0.96);
  --color-header-bg-scrolled: rgba(11, 15, 25, 0.99);
  --color-gallery-bg: #0d0d0d;
  --color-lightbox-overlay: rgba(0, 0, 0, 0.88);
  --color-theme-meta: #0b0f19;

  /* Плёночное зерно. Один data-URI на весь сайт: до этого он был скопирован
     в HeroBanner, HeroAimDemo и TrendingGames — три одинаковых строки в трёх местах. */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Typography */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale (modular, clamp-based for fluid responsive) */
  --fs-caption: 0.75rem;      /* 12px */
  --fs-small:   0.875rem;     /* 14px */
  --fs-body:    1rem;          /* 16px */
  --fs-body-lg: 1.125rem;     /* 18px */
  --fs-h4:      1.125rem;     /* 18px */
  --fs-h3:      clamp(1.15rem, 0.95rem + 0.6vw, 1.35rem);
  --fs-h2:      clamp(1.4rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h1:      clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-display: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Container */
  --container-max: 1200px;
  --container-padding: 1rem;

  /* Article content width — full container for spacious reading */
  --article-content-max: 100%;

  /* Header */
  --header-height: 64px;

  /* Safe area for notched devices */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* z-index layers */
  --z-dropdown: 200;
  --z-sticky: 500;
  --z-header: 800;
  --z-banner: 900;
  --z-scroll-top: 850;
  --z-lang-switch: 1000;
  --z-toast: 4000;
  --z-overlay: 5000;
  --z-modal: 5100;
  --z-lightbox: 5200;
  --z-cookie: 9990;
  --z-confetti: 9998;
  --z-skip-link: 9999;
}

/* === Light Theme ===
 *
 * Переработана 2026-07-25. Было 3/10 по аудиту: тема выглядела размытой не из-за
 * «недостатка контраста вообще», а из-за трёх системных поломок.
 *
 * 1. ШКАЛА ПОВЕРХНОСТЕЙ была схлопнута. `--color-bg-secondary` и `--color-card` — один
 *    и тот же `#eae7e2`, карточка отличалась от страницы на 2% (ΔL* 2.14 против 7.57
 *    в тёмной). Градиент «утопленный инпут в поднятой карточке» рендерился плоской
 *    заливкой. Теперь модель честная: тёплый бежевый «стол» → белая тёплая «бумага»,
 *    L* 89.3 → 93.1 → 95.6 → 99.3.
 *
 * 2. ХОВЕР БЫЛ ИНВЕРТИРОВАН. `--color-card-hover` был ТЕМНЕЕ и карточки, и самого фона
 *    страницы: при наведении лист проваливался в стол. В тёмной теме ховер поднимает —
 *    теперь и здесь тоже.
 *
 * 3. СЕМАНТИЧЕСКИЙ РЯД был перенесён «в лоб» на яркостях Tailwind-500/600, рассчитанных
 *    под БЕЛЫЙ фон и под заливку, а не под текст на бежевом. Отсюда 1.5–3:1 почти на всех
 *    статусах. Отдельная ловушка: суффикс `-light` в тёмной теме значит «читаемее», а в
 *    светлой светлее = ХУЖЕ. Поэтому здесь `*-light` равен базовому или темнее — не
 *    «облегчённая», а такая же по весу краска.
 *
 * Инвариант при любой правке: цвет-как-текст обязан давать ≥4.5:1 и на `--color-bg`,
 * и на `--color-card`; `--color-text-on-accent` (#fff) на этом же цвете как на заливке —
 * тоже ≥4.5:1. Бренд (тёплая бумага, hue ~40°, золото) сохранён: холодный серый и
 * чистый белый в палитру не вводятся.
 */
[data-theme="light"] {
  /* --- Поверхности: стол → бумага --- */
  --color-bg: #e6e0d4;
  --color-bg-secondary: #efebe1;
  --color-card: #f5f2ec;
  /* Светлее карточки: ховер поднимает лист, а не топит его */
  --color-card-hover: #fffdf7;
  --color-border: #bcb29c;
  /* Для элементов, которым бордер служит границей интерактива (инпуты, селекты,
     outline-кнопки): WCAG 1.4.11 требует 3:1, волосяной --color-border его не даёт */
  --color-border-strong: #857c6b;

  /* --- Текст: тёплый угольный вместо синеватого серого --- */
  --color-text: #1c1917;
  --color-text-secondary: #4b443a;
  --color-text-muted: #655e52;

  /* --- Акцент. Тот же золотой тон, но пригодный как текст --- */
  --color-accent: #7a5200;
  --color-accent-hover: #5c3d00;
  --color-accent-dark: #5c3d00;
  /* Второй полюс градиента логотипа. В светлой теме «ярче» не может означать
     «светлее» — сдвигаем в янтарь по тону, а не по светлоте (было #c9a94e = 1.74:1) */
  --color-accent-gold: #8f5410;
  --color-text-on-accent: #fff;

  /* --- Семантика --- */
  --color-buy: #0d6e32;
  --color-buy-hover: #0a5526;
  --color-danger: #b81c1c;
  --color-link: #1a4fbf;
  --color-link-hover: #133a8f;
  --color-deals: #0d6e32;
  --color-deals-hover: #0a5526;
  --color-market: #02618f;
  --color-market-hover: #01476b;
  --color-market-a10: rgba(2, 97, 143, 0.12);
  --color-market-a20: rgba(2, 97, 143, 0.22);
  --color-warning: #8a5a00;
  --color-success: #0d6e32;
  --color-danger-light: #b81c1c;

  /* Альфа-семейство акцента строится на самом акценте. Раньше оно было на rgba(184,134,11)
     при акценте #855c00 — плашки тонировались не тем золотом, что текст на них. */
  --color-accent-a4: rgba(122, 82, 0, 0.06);
  --color-accent-a5: rgba(122, 82, 0, 0.07);
  --color-accent-a8: rgba(122, 82, 0, 0.1);
  --color-accent-a10: rgba(122, 82, 0, 0.12);
  --color-accent-a12: rgba(122, 82, 0, 0.15);
  --color-accent-a15: rgba(122, 82, 0, 0.18);
  --color-accent-a20: rgba(122, 82, 0, 0.22);
  --color-accent-a25: rgba(122, 82, 0, 0.28);
  --color-accent-a30: rgba(122, 82, 0, 0.32);
  --color-accent-a35: rgba(122, 82, 0, 0.38);
  --color-accent-a40: rgba(122, 82, 0, 0.42);

  --color-buy-a30: rgba(13, 110, 50, 0.3);

  --color-danger-a8: rgba(184, 28, 28, 0.08);
  --color-danger-a25: rgba(184, 28, 28, 0.25);

  /* Статусы. `*-light` намеренно равен базовому: см. пункт 3 в шапке блока. */
  --color-status-working: #0d6e32;
  --color-status-working-light: #0d6e32;
  --color-status-updating: #8a5a00;
  --color-status-updating-light: #8a5a00;
  --color-status-testing: #7a5200;
  --color-status-testing-light: #7a5200;
  --color-status-checking: #02618f;
  --color-status-checking-light: #01476b;
  --color-status-error: #b81c1c;
  --color-status-error-light: #b81c1c;
  --color-status-unknown: #5f574a;
  --color-status-orange: #a04008;
  --color-info: #1a4fbf;
  --color-info-light: #4338ca;

  /* Оверлеи остаются чёрными в обеих темах: лайтбокс обязан затемнять всегда */
  --color-overlay: rgba(0, 0, 0, 0.3);
  --color-header-bg: rgba(230, 224, 212, 0.96);
  --color-header-bg-scrolled: rgba(230, 224, 212, 0.99);
  --color-gallery-bg: #ddd6c8;
  --color-lightbox-overlay: rgba(0, 0, 0, 0.75);
  --color-theme-meta: #e6e0d4;

  /* Тёплые тени вместо нейтрально-серых: на бежевой бумаге серая тень выглядит грязью */
  --shadow-sm: 0 1px 3px rgba(70, 55, 30, 0.1);
  --shadow-md: 0 4px 12px rgba(70, 55, 30, 0.14);
  --shadow-lg: 0 8px 24px rgba(70, 55, 30, 0.2);
}

/* Opt-in skin: перекрашивает accent-токены в market (sky-blue) внутри <main>.
   Активируется prop'ом accentSkin="market" в MainLayout — чтобы переиспользовать
   читовые страницы (Контакты и т.п.) в digital-разделах маркетплейса без дублей.
   Header/Footer лежат вне <main>, поэтому их gold-«мост» к читам не затрагивается.
   Альфа-варианты маппятся на два существующих market-альфа токена (визуально достаточно). */
.main--market {
  --color-accent: var(--color-market);
  --color-accent-hover: var(--color-market-hover);
  --color-accent-gold: var(--color-market-hover);
  --color-accent-dark: var(--color-market-hover);
  --color-accent-a4: var(--color-market-a10);
  --color-accent-a5: var(--color-market-a10);
  --color-accent-a8: var(--color-market-a10);
  --color-accent-a10: var(--color-market-a10);
  --color-accent-a12: var(--color-market-a10);
  --color-accent-a15: var(--color-market-a20);
  --color-accent-a20: var(--color-market-a20);
  --color-accent-a25: var(--color-market-a20);
  --color-accent-a30: var(--color-market-a20);
  --color-accent-a35: var(--color-market-a20);
  --color-accent-a40: var(--color-market-a20);
}

/* === Расширение контейнера на широких экранах === */
@media (min-width: 1440px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --container-max: 1320px;
  }
}

@media (min-width: 1920px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --container-max: 1440px;
  }
}

/* Чуть более щедрые боковые отступы на планшетах/десктопе */
@media (min-width: 768px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --container-padding: 1.5rem;
  }
}

/* Минимальные отступы на очень узком мобильном */
@media (max-width: 360px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --container-padding: 0.75rem;
  }
}