/* =====================================================================
   ichamps — RACING SKIN (Phase 1: каркас)
   Слой поверх notion.css. Делает тёмную тему полноценной racing-темой:
   перекрашивает токены --n-* и стилизует общий каркас (сайдбар, шапки).
   Светлая тема (data-theme="light") остаётся прежней notion-светлой.
   Контентные страницы мигрируются отдельными фазами.
   ===================================================================== */

/* --- Бренд-акцент: оранж в обеих темах --- */
:root{
  color-scheme: light;            /* по умолчанию светлая системная схема */
  --n-accent:       #FF5A1F;
  --n-accent-hover: #E14A12;
  --n-accent-soft:  rgba(255,90,31,.12);
  --n-ring:         0 0 0 3px rgba(255,90,31,.20);
  /* racing-поверхности (для будущих фаз) */
  --r-surface:   #141923;
  --r-surface-2: #1B2230;
  --r-surface-3: #232C3D;
}

/* ===================== ТЁМНАЯ RACING-ТЕМА ===================== */
[data-theme="dark"]{
  color-scheme: dark;             /* браузер не применяет авто-затемнение поверх */
  --n-text:          #EAEEF5;
  --n-text-muted:    #9AA6B8;
  --n-text-light:    #6B7689;
  --n-bg:            #0B0E14;
  --n-bg-subtle:     #141923;
  --n-bg-hover:      #1B2230;
  --n-bg-active:     #232C3D;
  --n-border:        #28303F;
  --n-border-strong: #3A4456;
  --n-accent:        #FF5A1F;
  --n-accent-hover:  #E14A12;
  --n-accent-soft:   rgba(255,90,31,.16);
  --n-danger:        #EF4444;
  --n-danger-hover:  #DC2626;
  --n-success:       #22C55E;
  --n-warning:       #F59E0B;
  --n-shadow:        0 8px 30px -12px rgba(0,0,0,.6);
  --n-shadow-lg:     0 16px 40px -16px rgba(0,0,0,.7);
  --n-ring:          0 0 0 3px rgba(255,90,31,.30);
  --r-surface:   #141923;
  --r-surface-2: #1B2230;
  --r-surface-3: #232C3D;
}

[data-theme="dark"] body{ background: var(--n-bg); color: var(--n-text); }
[data-theme="dark"] .bg-appbg{ background-color: var(--n-bg) !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6{ color: var(--n-text); }

/* ---------- Каркас: сайдбар (.r-side) ---------- */
[data-theme="dark"] .r-side{
  background: var(--r-surface) !important;
  border-color: var(--n-border) !important;
}
/* пункты навигации */
[data-theme="dark"] .r-side nav a{ color: var(--n-text-muted) !important; }
[data-theme="dark"] .r-side nav a:hover{ background: var(--r-surface-2) !important; color: var(--n-text) !important; }
/* активный пункт (в разметке: bg-slate-800 text-white) */
[data-theme="dark"] .r-side nav a.bg-slate-800{
  background: var(--n-accent-soft) !important;
  color: var(--n-accent) !important;
  box-shadow: none !important;
}
/* нижний блок действий */
[data-theme="dark"] .r-side .space-y-2 a.bg-slate-800{ background: var(--n-accent) !important; color:#fff !important; }
[data-theme="dark"] .r-side .space-y-2 a.bg-slate-800:hover{ background: var(--n-accent-hover) !important; }
[data-theme="dark"] .r-side .space-y-2 a.border{ background: var(--r-surface-2) !important; border-color: var(--n-border) !important; color: var(--n-text) !important; }
[data-theme="dark"] .r-side .space-y-2 a.border:hover{ border-color: var(--n-border-strong) !important; }
/* logout (красная кнопка) */
[data-theme="dark"] .r-side a.border-red-200{ background: transparent !important; border-color: rgba(239,68,68,.35) !important; color:#f87171 !important; }
[data-theme="dark"] .r-side a.border-red-200:hover{ background: rgba(239,68,68,.10) !important; }
/* разделители и подпись пользователя */
[data-theme="dark"] .r-side .border-t{ border-color: var(--n-border) !important; }
[data-theme="dark"] .r-side .text-slate-500{ color: var(--n-text-light) !important; }
/* переключатель языка (активный bg-slate-100) */
[data-theme="dark"] .r-side a.bg-slate-100,
[data-theme="dark"] .r-topbar a.bg-slate-100{ background: var(--r-surface-2) !important; color: var(--n-text) !important; }
[data-theme="dark"] .r-side .text-slate-500,
[data-theme="dark"] .r-topbar .text-slate-500{ color: var(--n-text-muted) !important; }

/* ---------- Каркас: верхние шапки (.r-topbar) ---------- */
[data-theme="dark"] .r-topbar{
  background: var(--r-surface) !important;
  border-color: var(--n-border) !important;
}
[data-theme="dark"] .r-topbar .border,
[data-theme="dark"] .r-topbar a.border,
[data-theme="dark"] .r-topbar button.border{ border-color: var(--n-border) !important; color: var(--n-text) !important; }
[data-theme="dark"] .r-topbar .text-slate-700{ color: var(--n-text) !important; }

/* ---------- Мобильный бэкдроп ---------- */
[data-theme="dark"] #mobileNavOverlay .bg-slate-900\/40{ background: rgba(0,0,0,.6) !important; }

/* =====================================================================
   ВИТРИНА /find — Phase 2
   ===================================================================== */
/* Перекрас светлых Tailwind-утилит страницы в токены (скоуп .r-discovery) */
[data-theme="dark"] .r-discovery .text-slate-900,
[data-theme="dark"] .r-discovery .text-slate-800,
[data-theme="dark"] .r-discovery .text-slate-700{ color: var(--n-text) !important; }
[data-theme="dark"] .r-discovery .text-slate-600,
[data-theme="dark"] .r-discovery .text-slate-500{ color: var(--n-text-muted) !important; }
[data-theme="dark"] .r-discovery .text-slate-400,
[data-theme="dark"] .r-discovery .text-slate-300{ color: var(--n-text-light) !important; }
[data-theme="dark"] .r-discovery .bg-white{ background: var(--r-surface) !important; }
[data-theme="dark"] .r-discovery .border-slate-200,
[data-theme="dark"] .r-discovery .border-slate-100{ border-color: var(--n-border) !important; }
[data-theme="dark"] .r-discovery .bg-slate-800{ background: var(--n-accent) !important; color:#fff !important; }
[data-theme="dark"] .r-discovery .bg-slate-800:hover,
[data-theme="dark"] .r-discovery .hover\:bg-slate-700:hover{ background: var(--n-accent-hover) !important; }
[data-theme="dark"] .r-discovery input[type="text"],
[data-theme="dark"] .r-discovery select{ background: var(--r-surface-2) !important; color: var(--n-text) !important; border-color: var(--n-border) !important; }
[data-theme="dark"] .r-discovery .hover\:bg-slate-50:hover,
[data-theme="dark"] .r-discovery .hover\:bg-slate-100:hover{ background: var(--r-surface-2) !important; }
[data-theme="dark"] .r-discovery .border-dashed{ border-color: var(--n-border-strong) !important; }

/* Карточка ивента (анатомия из макета discovery.html) */
.r-ev-card{ display:block; border:1px solid var(--n-border); background:var(--r-surface); border-radius:16px; overflow:hidden; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.r-ev-card:hover{ border-color:var(--n-border-strong); transform:translateY(-3px); box-shadow:var(--n-shadow); }
.r-ev-head{ position:relative; height:8rem; padding:.7rem .8rem; display:flex; flex-direction:column; overflow:hidden; color:#fff; }
.r-ev-head::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><path d='M20 120 C 80 20,140 40,180 90 S 300 150,380 40' fill='none' stroke='white' stroke-width='6' stroke-linecap='round' opacity='0.10'/></svg>") no-repeat right center; background-size:auto 130%; }
.r-ev-badges{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:.4rem; }
.r-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .42rem; border-radius:6px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:#fff; white-space:nowrap; }
.r-ev-title{ position:relative; z-index:1; margin-top:auto; font-family:'Rubik','Inter',sans-serif; font-weight:700; font-size:1.02rem; line-height:1.15; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.r-ev-body{ padding:.85rem; }
.r-ev-foot{ margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--n-border); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.r-ev-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:8px; background:var(--n-accent); color:#fff; font-size:.75rem; font-weight:600; white-space:nowrap; transition:background .15s ease; }
.r-ev-card:hover .r-ev-btn{ background:var(--n-accent-hover); }
.r-count{ display:inline-block; padding:.05rem .35rem; border-radius:5px; font-size:11px; font-weight:600; background:var(--n-accent-soft); color:var(--n-accent); }

/* ===================== Общие компоненты макета (canonical) ===================== */
.font-display{ font-family:'Rubik','Inter',sans-serif; }

.btn-accent{ background:var(--n-accent); color:#fff; }
.btn-accent:hover{ background:var(--n-accent-hover); color:#fff; }
.btn-ghost{ background:var(--r-surface-2); border:1px solid var(--n-border); color:var(--n-text); }
.btn-ghost:hover{ border-color:var(--n-border-strong); }

.chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--r-surface-2); border:1px solid var(--n-border); color:var(--n-text-muted); border-radius:99px; cursor:pointer; text-decoration:none; transition:transform .12s ease, background-color .15s, border-color .15s, color .15s; }
.chip:hover{ color:var(--n-text); border-color:var(--n-border-strong); }
.chip.on{ background:var(--n-accent-soft); border-color:var(--n-accent); color:var(--n-accent); }
.chip:active{ transform:scale(.95); }

.r-search{ background:var(--r-surface-2); border:1px solid var(--n-border); color:var(--n-text); }
.r-search::placeholder{ color:var(--n-text-light); }
.r-search:focus{ outline:none; border-color:var(--n-accent); box-shadow:0 0 0 3px var(--n-accent-soft); }

.r-select{ background:var(--r-surface-2); border:1px solid var(--n-border); color:var(--n-text); border-radius:8px; }
.r-select:focus{ outline:none; border-color:var(--n-accent); }