/* ============================================================
   MARKETFLOW DESIGN TOKENS — Дизайн B (Изумруд + Янтарь)
   ============================================================ */
:root {
  /* ── Шрифты ────────────────────────────────────────────────
     --font-sans    — основной текст и крупные числа (Golos Text: отличная кириллица)
     --font-display — крупные заголовки (Onest, как было)
     --font-mono    — микро-лейблы, доли, ранги, табличные цифры (JetBrains Mono) */
  --font-sans:    'Golos Text', 'Inter', system-ui, sans-serif;
  --font-display: 'Onest', 'Golos Text', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Primary (изумруд — деньги, рост, надёжность) ─────────── */
  --primary:          #1B6850;
  --primary-pressed:  #144d3c;
  --primary-deep:     #0d3a2c;
  --primary-soft:     #E8F0EB;
  --on-primary:       #ffffff;

  /* ── Accent (янтарь — премиум, золото, тёплый акцент) ──────── */
  --accent:           #C9994A;
  --accent-pressed:   #A07831;
  --accent-deep:      #7C5A20;
  --accent-soft:      #F5EAD4;

  /* ── Brand (legacy, для совместимости — теперь тёплые) ─────── */
  --brand-navy:       #1F1D18;     /* dark warm для dark theme */
  --brand-navy-deep:  #14120E;
  --brand-navy-mid:   #2A2620;
  --link-blue:        #4A7BAA;     /* приглушённый синий для ссылок */

  /* ── Accent палитра (legacy — для бейджей источников) ──────── */
  --brand-purple:     #7b3ff2;      /* WB остаётся фиолетовым */
  --brand-teal:       #1B6850;      /* iiko = primary */
  --brand-green:      #1B6850;
  --brand-orange:     #C9994A;      /* теперь = accent */
  --brand-pink:       #C13F2A;
  --brand-yellow:     #D9A55B;

  /* ── Card tints — переосмыслены в тёплой палитре ──────────── */
  --tint-peach:       #F5EAD4;      /* кремовый янтарь */
  --tint-rose:        #FCEFEC;      /* мягкий розовый */
  --tint-mint:        #E8F0EB;      /* primary-soft */
  --tint-lavender:    #ECE5DA;      /* warm beige */
  --tint-sky:         #E5EDF3;      /* приглушённый sky */
  --tint-yellow:      #F8EFD9;      /* warm yellow */
  --tint-yellow-bold: #F0E0B0;
  --tint-cream:       #FBF9F3;
  --tint-gray:        #EDE9DF;

  /* ── Semantic ─────────────────────────────────────────────── */
  --semantic-success: #1B6850;
  --semantic-warning: #C97700;
  --semantic-error:   #C1331F;

  /* ── Surface (тёплые тона) ────────────────────────────────── */
  --canvas:           #FFFFFF;       /* основной фон карточек */
  --surface:          #FBF9F3;       /* фон страниц — кремовый */
  --surface-soft:     #F7F4ED;       /* подложки */

  /* ── Borders (warm hairline) ──────────────────────────────── */
  --hairline:         #E8E2D4;
  --hairline-soft:    #EFEAE0;
  --hairline-strong:  #D4CCB8;

  /* ── Text (warm ink) ──────────────────────────────────────── */
  --ink-deep:         #14120E;
  --ink:              #1F1D18;
  --charcoal:         #2D2A23;
  --slate:            #4A4843;
  --steel:            #6B6760;
  --stone:            #8A857C;
  --muted:            #B5B0A6;
  --on-dark:          #FBF9F3;       /* для тёмного sidebar в dark mode */
  --on-dark-muted:    #8A857C;

  /* ── Radius ───────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;       /* было 8 */
  --r-lg:  14px;       /* было 12 */
  --r-xl:  20px;       /* было 16 */
  --r-xxl: 24px;
  --r-full: 9999px;

  /* ── Spacing ──────────────────────────────────────────────── */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  20px;
  --sp-xl:  24px;
  --sp-xxl: 32px;

  /* ── Sidebar ──────────────────────────────────────────────── */
  --sidebar-w: 232px;
  --sidebar-bg: #F7F4ED;         /* cream paper — светлый */

  /* ── Shadows ──────────────────────────────────────────────── */
  --sh-sm: 0 1px 2px rgba(31,29,24,0.04);
  --sh-md: 0 4px 12px rgba(31,29,24,0.06);
  --sh-lg: 0 12px 32px rgba(31,29,24,0.10);

  /* ── Transition (smoother bezier) ─────────────────────────── */
  --ease: 0.18s cubic-bezier(.4, 0, .2, 1);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-size: 14px; }
body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
input, select, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ── Display heading utility — Onest для крупного ───────────
   .kpi-value намеренно НЕ здесь: крупные числа на Golos Text +
   tabular-nums (см. components.css), как в редизайне Продаж. */
.h-display,
.topbar-title,
.brand-name,
.card-title,
.pricing-name,
.pricing-price,
.compare-val {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ── DARK THEME (тёплая тёмная) ────────────────────────────── */
html.dark {
  --canvas:           #1F1D18;
  --surface:          #14120E;
  --surface-soft:     #2A2620;
  --hairline:         rgba(255,255,255,0.08);
  --hairline-soft:    rgba(255,255,255,0.05);
  --hairline-strong:  rgba(255,255,255,0.15);
  --ink-deep:         #FBF9F3;
  --ink:              #F0EAD6;
  --charcoal:         #D9D2BD;
  --slate:            #A39E92;
  --steel:            #8A857C;
  --stone:            #6B6760;
  --muted:            #4A4843;
  --sidebar-bg:       #14120E;
  --primary-soft:     rgba(27,104,80,0.18);
  --accent-soft:      rgba(201,153,74,0.15);
  --tint-peach:       rgba(201,153,74,0.12);
  --tint-rose:        rgba(193,51,31,0.12);
  --tint-mint:        rgba(27,104,80,0.15);
  --tint-lavender:    rgba(236,229,218,0.08);
  --tint-sky:         rgba(74,123,170,0.12);
  --tint-yellow:      rgba(217,165,91,0.12);
  --tint-gray:        rgba(255,255,255,0.06);
  background: var(--surface);
  color: var(--ink);
}
html.dark body { background: var(--surface); }
html.dark .auth-card,
html.dark .card,
html.dark .tbl-wrap,
html.dark .kpi-card,
html.dark .settings-card,
html.dark .pricing-card,
html.dark .src-conn-card,
html.dark .compare-card { background: #2A2620; border-color: rgba(255,255,255,0.08); }
html.dark .topbar { background: #1F1D18; border-bottom-color: rgba(255,255,255,0.08); }
html.dark .sidebar { background: #14120E; border-right-color: rgba(255,255,255,0.06); }
html.dark .tbl thead th { background: #14120E; color: var(--stone); }
html.dark .tbl tbody td { color: var(--charcoal); border-bottom-color: rgba(255,255,255,0.05); }
html.dark .tbl tbody tr:hover td { background: rgba(27,104,80,0.10); }
html.dark .form-input,
html.dark .field-input,
html.dark .select-field { background: #2A2620; border-color: rgba(255,255,255,0.12); color: var(--ink); }
html.dark .pill-tab { border-color: rgba(255,255,255,0.10); color: var(--slate); }
html.dark .pill-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
html.dark .topbar-icon-btn { border-color: rgba(255,255,255,0.10); color: var(--slate); }
html.dark .topbar-icon-btn:hover { background: rgba(255,255,255,0.06); }
html.dark .overview-dropzone { background: #2A2620; border-color: rgba(255,255,255,0.12); }
html.dark .overview-dropzone:hover { background: rgba(27,104,80,0.12); }
html.dark .modal-box { background: #2A2620; }
html.dark .avatar-dropdown { background: #1F1D18; border-color: rgba(255,255,255,0.08); }
html.dark .dropdown-item:hover { background: rgba(255,255,255,0.05); }
html.dark .welcome-bar { background: linear-gradient(135deg, #2A2620 0%, #14120E 100%); }

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--r-full); }