/* === Глобальные дизайн-токены: цвета, шрифты, размеры, темы. === */

/* Emoji-fallback override через unicode-range. На Linux-Chromium (headless)
   часть эмодзи (🐱, 😀) подхватывается DejaVu Sans (ЧБ). С EmojiFont браузер
   ищет emoji-codepoint'ы СНАЧАЛА в этом face — где local("Noto Color Emoji")
   разрешается в цветной шрифт. На macOS/Windows аналогично через Apple/Segoe. */
@font-face {
  font-family: 'EmojiFont';
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Noto Color Emoji');
  unicode-range: U+1F000-1FFFF, U+2600-26FF, U+2700-27BF, U+2300-23FF,
                 U+2B00-2BFF, U+1F1E6-1F1FF, U+200D, U+FE0F, U+20E3;
}

:root {
  color-scheme: dark light;

  /* === Базовые цвета (dark theme) === */
  --bg: #0a0d14;
  --bg-grad-1: #142042;
  --bg-grad-2: #2b1147;
  --panel: rgba(22, 26, 36, 0.62);
  --panel-solid: rgba(22, 26, 36, 0.62);
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.18);
  --text: #ecf0fa;
  --muted: #8a93aa;
  --accent: #6aa8ff;
  --accent-2: #2dd4bf;

  /* Rank-цвета (dark) */
  --far: #ff5c5c;       /* красный — далеко (rank > total/3) */
  --mid: #ffa94d;       /* оранжевый — средне */
  --near: #5cd383;      /* зелёный — близко */
  --miss: #6c768e;      /* для ненайденных слов */
  --win: #5cd383;

  /* === Цветовые семейства как RGB-triplets для использования с alpha ===
     Use-site: rgba(var(--success-rgb), 0.18) */
  --success-rgb: 92, 211, 131;     /* #5cd383 — зелёный success/win/free-feature */
  --gold-rgb:    244, 196, 48;     /* #f4c430 — золотой PRO/achievement */
  --search-rgb:  106, 168, 255;    /* #6aa8ff — голубой search-card accent */
  --tg-rgb:      42, 171, 238;     /* #2aabee — Telegram-канал */

  /* === Радиусы === */
  --radius: 16px;
  --radius-sm: 10px;

  /* === Surface-overlay'и (фоны hover/active/input). В dark — белый с alpha;
     в light — тёмный с alpha (см. @media ниже). === */
  --surface:        rgba(255,255,255,0.04);
  --surface-strong: rgba(255,255,255,0.07);
  --surface-hover:  rgba(255,255,255,0.10);
  --surface-pressed:rgba(255,255,255,0.14);

  /* === Тени-пресеты === */
  --shadow-capsule: 0 10px 28px rgba(0, 0, 0, 0.45);   /* bottom-nav, reactions-bar */
  --shadow-card:    0 10px 30px rgba(0, 0, 0, 0.25);   /* panels: share/install/win/search */
  --shadow-toast:   0 8px 28px rgba(0, 0, 0, 0.50);    /* #net-toast */

  /* === Backdrop-blur пресеты === */
  --blur-light:  blur(6px) saturate(170%) brightness(105%);   /* InputCard, .row */
  --blur-medium: blur(8px) saturate(140%);                     /* search-row, toast */
  --blur-heavy:  blur(12px) saturate(140%);                    /* большие panels */
  --blur-strong: blur(16px) saturate(140%);                    /* capsule баров */

  /* === Spacing пресеты === */
  --gap-sm:    6px;
  --gap-md:    10px;
  --pad-card:  14px;

  /* === Transition durations === */
  --t-quick:  0.15s;   /* hover/color */
  --t-smooth: 0.18s;   /* element transforms */
  --t-std:    0.25s;   /* pop, rowIn, входы */

  /* === Font-size ladder === */
  --fs-xs: 11px;       /* bn-label */
  --fs-sm: 12px;       /* muted, count, stat-name */
  --fs-md: 14px;       /* default body */
  --fs-lg: 18px;       /* input, me-nick, pl-emo */

  /* === Z-index ladder === */
  --z-content:  1;     /* .app */
  --z-sticky:   4;     /* .input-card */
  --z-overlay: 50;     /* bottom-nav, reactions-bar */
  --z-burst:   60;     /* fireworks */
  --z-toast: 1200;     /* #net-toast */
  --z-conn:  9999;     /* connection-badge */

  /* === Градиент-пресеты === */
  --grad-success:    linear-gradient(135deg, rgba(var(--success-rgb), 0.18), rgba(45, 212, 191, 0.10));
  --grad-gold-solid: linear-gradient(135deg, #f4c430, #c08a00);
  --grad-gold-soft:  linear-gradient(135deg, rgba(var(--gold-rgb), 0.18), rgba(192, 138, 0, 0.10));
  --grad-search:     linear-gradient(135deg, rgba(var(--search-rgb), 0.32), rgba(79, 125, 255, 0.18));
  --grad-primary:    linear-gradient(135deg, var(--accent), #4f7dff);
}

/* Light-токены. Дублируются под двумя селекторами: системная prefers-color-scheme
   (обычный user-flow) И явный [data-theme="light"] на html (для VideoMaker, где
   Chromium ColorScheme.Light не пробивается через --app= окно). */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6fb;
    --bg-grad-1: #cad6f0;
    --bg-grad-2: #e9d5ff;
    --panel: rgba(255,255,255,0.62);
    --panel-solid: rgba(255,255,255,0.62);
    --border: rgba(15,23,42,0.14);
    --border-strong: rgba(15,23,42,0.28);
    --text: #0f172a;
    --muted: #475569;
    --accent: #3b82f6;
    --accent-2: #0d9488;
    --far:  #dc2626;
    --mid:  #d97706;
    --near: #15803d;
    --miss: #64748b;
    --win:  #15803d;
    --success-rgb: 21, 128, 61;
    --search-rgb:  59, 130, 246;
    --surface:        rgba(15,23,42,0.04);
    --surface-strong: rgba(15,23,42,0.07);
    --surface-hover:  rgba(15,23,42,0.10);
    --surface-pressed:rgba(15,23,42,0.14);
    --shadow-capsule: 0 6px 16px rgba(15, 23, 42, 0.08);
    --shadow-card:    0 4px 14px rgba(15, 23, 42, 0.07);
    --shadow-toast:   0 6px 18px rgba(15, 23, 42, 0.10);
  }
}
:root[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-grad-1: #cad6f0;
  --bg-grad-2: #e9d5ff;
  --panel: rgba(255,255,255,0.62);
  --panel-solid: rgba(255,255,255,0.62);
  --border: rgba(15,23,42,0.14);
  --border-strong: rgba(15,23,42,0.28);
  --text: #0f172a;
  --muted: #475569;
  --accent: #3b82f6;
  --accent-2: #0d9488;
  --far:  #dc2626;
  --mid:  #d97706;
  --near: #15803d;
  --miss: #64748b;
  --win:  #15803d;
  --success-rgb: 21, 128, 61;
  --search-rgb:  59, 130, 246;
  --surface:        rgba(15,23,42,0.04);
  --surface-strong: rgba(15,23,42,0.07);
  --surface-hover:  rgba(15,23,42,0.10);
  --surface-pressed:rgba(15,23,42,0.14);
  --shadow-capsule: 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-card:    0 4px 14px rgba(15, 23, 42, 0.07);
  --shadow-toast:   0 6px 18px rgba(15, 23, 42, 0.10);
}