/* src/css/tokens.css — переменные и brand-акценты (из index.html) */
/* ===== SHARED VARIABLES — DARK NOIR (OKLCH, hue 168) ===== */
:root {
  /* brand accent — Tiffany default; Pink via html[data-brand="pink"] */
  /* Тон зафиксирован по новому лого OMNI: мятные буквы OM = #A0F5EE (hue 174) */
  --brand: #A0F5EE;
  --brand-rgb: 160, 245, 238;
  --brand-soft: rgba(160, 245, 238, 0.55);
  --brand-faint: rgba(160, 245, 238, 0.25);
  --brand-pulse: rgba(160, 245, 238, 0.35);
  --on-brand: #020202;
  /* Дуо-акцент (слияние тем): --hot = второй цвет лого, розовые буквы NI.
     Семантика «горячего»: сегмент 18+, поиск собеседника, PREMIUM */
  --hot: #F6C4C7;
  --hot-rgb: 246, 196, 199;
  --bg: oklch(13% .004 168);
  --bg-2: oklch(9% .004 168);
  --panel: oklch(17% .004 168);
  --raised: oklch(21% .004 168);
  --fg: oklch(96% .003 168);
  --fg-dim: oklch(76% .004 168);
  --muted: oklch(64% .004 168);
  --muted-2: oklch(64% .004 168);
  --border: oklch(29% .004 168);
  --border-bright: oklch(35% .004 168);
  --border-ultra-thin: oklch(24% .004 168);
  --accent: var(--brand);
  --accent-glow: rgba(var(--brand-rgb), 0.2);
  --onblack: oklch(14% .006 168);
  --signal: oklch(80% .11 174);
  --danger: oklch(66% .17 25);
  --ticker-green: #c4ff3a;
  --ticker-red: #ff5e3a;
}

/* Pink brand — only accent swaps; surfaces follow dark/light mode
   Тон зафиксирован по новому лого OMNI: розовые буквы NI = #F6C4C7 (hue 358) */
html[data-brand="pink"] {
  --brand: #F6C4C7;
  --brand-rgb: 246, 196, 199;
  --brand-soft: rgba(246, 196, 199, 0.55);
  --brand-faint: rgba(246, 196, 199, 0.25);
  --brand-pulse: rgba(246, 196, 199, 0.35);
  --on-brand: #1a0a12;
  --signal: oklch(80% .09 358);
  /* инверсия дуо-акцента: «горячий» здесь мятный */
  --hot: #A0F5EE;
  --hot-rgb: 160, 245, 238;
}

/* Grey brand — серая тема (третья палитра по механизму duo).
   Тон зафиксирован по серому лого OMNI: жёлтые буквы NI = #E1B358.
   Основные цвета темы: серый + жёлтый + чёрный; «горячее» (18+, поиск,
   PREMIUM) тоже жёлтое — розовый и тиффани в этой теме не используются */
html[data-brand="grey"] {
  --brand: #E1B358;
  --brand-rgb: 225, 179, 88;
  --brand-soft: rgba(225, 179, 88, 0.55);
  --brand-faint: rgba(225, 179, 88, 0.25);
  --brand-pulse: rgba(225, 179, 88, 0.35);
  --on-brand: #171410;
  --signal: var(--brand);
  --hot: #E1B358;
  --hot-rgb: 225, 179, 88;
}

/* Paper (light) mode: тот же тон лого, глубже и насыщеннее —
   пастель лого не читается на ivory, для светлой темы затемняем */
html[data-theme="paper"] {
  --brand: #0FA9A1;
  --brand-rgb: 15, 169, 161;
  --on-brand: #FFFFFF;
  --hot: #D2606A;
  --hot-rgb: 210, 96, 106;
}
html[data-brand="pink"][data-theme="paper"] {
  --brand: #D2606A;
  --brand-rgb: 210, 96, 106;
  --on-brand: #FFFFFF;
  --hot: #0FA9A1;
  --hot-rgb: 15, 169, 161;
}

/* ===== DARK NOIR — КОМПОНЕНТНЫЕ ОВЕРРАЙДЫ ===== */
body { background: var(--bg); color: var(--fg); }
.bg-gradient {
  background:
    radial-gradient(ellipse 800px 600px at 20% 20%, color-mix(in oklch, var(--fg) 4%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 600px 800px at 80% 80%, color-mix(in oklch, var(--fg) 2%, transparent) 0%, transparent 60%),
    var(--bg);
}
.bg-grid {
  background-image:
    linear-gradient(color-mix(in oklch, var(--fg) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--fg) 5%, transparent) 1px, transparent 1px);
}
.watermark { color: color-mix(in oklch, var(--fg) 5%, transparent); }
.msg-context-menu { background: var(--panel); border-color: var(--border); }
.msg-context-menu button { background: color-mix(in oklch, var(--fg) 6%, transparent); }
.msg-context-menu button:hover { background: color-mix(in oklch, var(--fg) 12%, transparent); }
.reaction-picker { background: var(--panel); border-color: var(--border-bright); }
.reaction-picker button:hover { background: color-mix(in oklch, var(--fg) 10%, transparent); }
.msg-reaction { background: color-mix(in oklch, var(--fg) 6%, transparent); }
.row.mine .msg-reply-bar { background: var(--onblack); }
.row.mine .msg-reply-nick { color: var(--onblack); }
.row.mine .msg-reply-text { color: color-mix(in oklch, var(--onblack) 70%, transparent); }
.chat-head { background: var(--panel); border-color: var(--border); padding: 0 14px; font-size: 13px; font-weight: 600; }
.input-bar { background: var(--panel); border-top: 1px solid var(--border); }
.input-shell { background: var(--raised); border: 1px solid var(--border); border-radius: 10px; }
.send-btn { background: var(--accent); color: var(--onblack); border-radius: 10px; }
.msgs { background: var(--bg-2); padding: 14px; gap: 10px; }
.row { width: auto; max-width: 70%; align-self: flex-start; }
.row.mine { align-self: flex-end; }
.row .nick { display: none; }
.row .txt { background: var(--raised); color: var(--fg); border-radius: 12px; padding: 9px 12px; font-size: 15px; line-height: 1.45; border: none; letter-spacing: -0.005em; }
.row.mine .txt { background: var(--accent); color: var(--onblack); border-radius: 12px; border-bottom-right-radius: 4px; }
.row:not(.mine) .txt { border-bottom-left-radius: 4px; }
.row .msg-meta { color: var(--muted); opacity: 1; }
.row.mine .msg-meta { color: oklch(45% .006 168); }
.chat-page > .chat { background: var(--bg-2); }
.row .nick { border-color: var(--border-bright); }
#sidePanel { background: var(--raised) !important; border-color: var(--border-ultra-thin); }
.panel-tab { background: var(--panel); border-color: var(--border-bright); }
.chat-actions-menu { background: var(--panel); border-color: var(--border-bright); }
.chat-ended-btn { background: color-mix(in oklch, var(--fg) 6%, transparent); border-color: var(--border-bright); }
.chat-close-btn { border-color: var(--fg); color: var(--danger); }
.toast { background: var(--panel); border-color: var(--border-bright); }
.search-card { background: var(--panel); border-color: var(--border-bright); }
.cancel-btn { background: color-mix(in oklch, var(--danger) 10%, transparent); border-color: color-mix(in oklch, var(--danger) 25%, transparent); color: var(--danger); }
.modal-overlay { background: color-mix(in oklch, var(--bg-2) 85%, transparent); }
.vip-overlay { background: color-mix(in oklch, var(--bg-2) 90%, transparent); }
.vip-modal-box { background: var(--panel); border-color: var(--border); }
.vip-modal-close { border-color: var(--border); color: var(--muted); }
.vip-textarea { background: color-mix(in oklch, var(--fg) 3%, transparent); border-color: var(--border); }
.vip-textarea::placeholder { color: var(--muted); }
.profile-action-btn { background: color-mix(in oklch, var(--fg) 3%, transparent); border-color: var(--border); }
.profile-action-btn:hover { background: color-mix(in oklch, var(--fg) 6%, transparent); }
.profile-action-gold { background: var(--accent); color: var(--onblack); border-color: var(--accent); }
.profile-action-gold .profile-action-icon { color: var(--onblack); }
.chat-state-btn { background: var(--accent); color: var(--onblack); border-color: var(--accent); }
.logout-btn { background: transparent; border: 1px solid color-mix(in oklch, var(--danger) 35%, transparent); color: var(--danger); }
.side-fld { background: color-mix(in oklch, var(--fg) 2%, transparent); border-color: var(--border); }
.side-fld::placeholder { color: var(--muted); }
.side-btn { background: color-mix(in oklch, var(--fg) 3%, transparent); border-color: var(--border); }
.login-btn { background: transparent; border-color: var(--border); }
.contact .c-ava { background: color-mix(in oklch, var(--fg) 5%, transparent); border-color: var(--border); }
.request-item { background: color-mix(in oklch, var(--fg) 2%, transparent); border-color: var(--border); }
.complaint-options { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.complaint-opt {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--fg) 3%, transparent);
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.complaint-opt:hover { background: color-mix(in oklch, var(--fg) 6%, transparent); border-color: var(--border-bright); }
.complaint-opt.selected { background: color-mix(in oklch, var(--danger) 10%, transparent); border-color: var(--danger); color: var(--danger); }
.select, select { background: var(--raised); color: var(--fg); }
.select option, select option { background: var(--raised); color: var(--fg); }
.toggle-slider { background: color-mix(in oklch, var(--fg) 8%, transparent); border-color: var(--border-ultra-thin); }
.toggle-switch input:checked + .toggle-slider { background: color-mix(in oklch, var(--danger) 25%, transparent); border-color: var(--danger); }
.online-dot { background: var(--signal); box-shadow: 0 0 4px color-mix(in oklch, var(--signal) 40%, transparent); }
.online-dot-sm { background: var(--signal); box-shadow: 0 0 3px color-mix(in oklch, var(--signal) 30%, transparent); }
.group-pill.creator { border-color: var(--border-bright); color: var(--fg); }
.hl-style-btn { background: color-mix(in oklch, var(--fg) 2%, transparent); border-color: var(--border); }
.hl-style-btn.active { border-color: var(--fg); background: color-mix(in oklch, var(--fg) 6%, transparent); }
.topic-card { background: color-mix(in oklch, var(--fg) 2%, transparent); border-color: var(--border); }
.ad-card { background: color-mix(in oklch, var(--fg) 2%, transparent); border-color: var(--border); }
.vip-card { background: color-mix(in oklch, var(--fg) 2%, transparent); border-color: var(--border); }
.user-code-search-box { background: color-mix(in oklch, var(--fg) 3%, transparent); border-color: var(--border); }
.req-accept { border-color: var(--border-bright); }
.req-decline { border-color: var(--border); color: var(--danger); }
.panel-ava { background: color-mix(in oklch, var(--fg) 5%, transparent); border-color: var(--border); }
.palette-panel { background: color-mix(in oklch, var(--fg) 2%, transparent); border-color: var(--border); }
.palette-select { background: color-mix(in oklch, var(--fg) 3%, transparent); border-color: var(--border); }
.theme-dropdown-btn { background: color-mix(in oklch, var(--fg) 3%, transparent); border-color: var(--border); }
#topicList { background: var(--panel); border-color: var(--border); }
#vipAdsPage { background: var(--panel); border-color: var(--border); }
.media-menu-popup { background: var(--panel); border: 1px solid var(--border-bright); }
.media-menu-btn { background: color-mix(in oklch, var(--fg) 7%, transparent); }
.media-menu-btn:hover { background: color-mix(in oklch, var(--fg) 12%, transparent); }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { overflow-x: hidden; }
*::selection { background: var(--accent); color: var(--bg); }