/* ═══════════════════════════════════════════════════════════════════════
   INTERO PLATFORM · DESIGN TOKENS
   Single source of truth для всех дашбордов сети.
   Подключается как <link rel="stylesheet" href="/design-tokens.css">
   или @import в CSS/PostCSS.
   v1.0 · 2026-04-21
═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── CORE PALETTE · brand neutral ────────────────────────────────── */
  --ip-bg:            #0a0f1d;           /* главный фон */
  --ip-bg-2:          #0e1428;           /* второстепенный фон */
  --ip-surface:       #141a2b;           /* поверхность карточек */
  --ip-surface-2:     #1c2340;           /* вторая поверхность (hover, subtle) */
  --ip-surface-raised: #242b45;          /* приподнятые попапы, выделения */
  --ip-border:        rgba(148,163,184,.10);
  --ip-border-strong: rgba(148,163,184,.20);
  --ip-divider:       rgba(148,163,184,.08);

  /* ── TEXT ───────────────────────────────────────────────────────── */
  --ip-text:          #e8eef8;           /* основной текст */
  --ip-text-soft:     #cbd5e1;           /* вторичный */
  --ip-text-muted:    #94a3b8;           /* тусклый */
  --ip-text-faint:    #64748b;           /* подписи, мета */
  --ip-text-inverse:  #0a0f1d;           /* на светлом */

  /* ── SEMANTIC ───────────────────────────────────────────────────── */
  --ip-success:       #10b981;
  --ip-success-soft:  rgba(16,185,129,.12);
  --ip-warning:       #f59e0b;
  --ip-warning-soft:  rgba(245,158,11,.12);
  --ip-danger:        #f43f5e;
  --ip-danger-soft:   rgba(244,63,94,.12);
  --ip-info:          #06b6d4;
  --ip-info-soft:     rgba(6,182,212,.12);

  /* ── PRIMARY ACCENT · единый для платформы ─────────────────────── */
  /* Базовый акцент — emerald. Каждый sub-brand может переопределить
     --ip-accent в своём собственном :root или [data-brand="…"]. */
  --ip-accent:        #10b981;           /* emerald-500 */
  --ip-accent-hi:     #34d399;           /* highlight */
  --ip-accent-dim:    #059669;           /* pressed */
  --ip-accent-soft:   rgba(16,185,129,.14);
  --ip-accent-ring:   rgba(16,185,129,.35);
  --ip-accent-glow:   rgba(16,185,129,.28);

  /* Градиент акцента (для hero, CTA) */
  --ip-gradient-accent: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%);
  --ip-gradient-hero:
    radial-gradient(ellipse at top left,  rgba(16,185,129,.15), transparent 50%),
    radial-gradient(ellipse at top right, rgba(59,130,246,.12), transparent 50%),
    radial-gradient(ellipse at bottom,    rgba(139,92,246,.08), transparent 60%);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
  --ip-font-sans:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ip-font-display:  'Manrope', 'Inter', system-ui, sans-serif;
  --ip-font-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — 1.25 (мажорная терция) */
  --ip-text-xs:       11px;               /* badges, meta */
  --ip-text-sm:       13px;               /* secondary */
  --ip-text-base:     14px;               /* body */
  --ip-text-md:       16px;               /* emphasized body */
  --ip-text-lg:       20px;               /* section heading */
  --ip-text-xl:       24px;               /* card title */
  --ip-text-2xl:      32px;               /* page title */
  --ip-text-3xl:      40px;               /* hero */
  --ip-text-4xl:      56px;               /* hero XL */
  --ip-lh-tight:      1.15;
  --ip-lh-normal:     1.4;
  --ip-lh-loose:      1.6;
  --ip-tracking-xs:   0.08em;              /* uppercase labels */
  --ip-tracking-sm:   0.02em;

  /* ── SPACING · 4px baseline ─────────────────────────────────────── */
  --ip-space-1:       4px;
  --ip-space-2:       8px;
  --ip-space-3:       12px;
  --ip-space-4:       16px;
  --ip-space-5:       20px;
  --ip-space-6:       24px;
  --ip-space-8:       32px;
  --ip-space-10:      40px;
  --ip-space-12:      48px;
  --ip-space-16:      64px;
  --ip-space-20:      80px;

  /* ── RADIUS ─────────────────────────────────────────────────────── */
  --ip-radius-xs:     4px;                /* tiny pills */
  --ip-radius-sm:     8px;                /* inputs, buttons */
  --ip-radius-md:     12px;               /* small cards */
  --ip-radius-lg:     16px;               /* cards */
  --ip-radius-xl:     20px;               /* large cards */
  --ip-radius-2xl:    28px;               /* hero panels */
  --ip-radius-full:   999px;

  /* ── SHADOWS ────────────────────────────────────────────────────── */
  --ip-shadow-sm:     0 1px 3px rgba(0,0,0,.20);
  --ip-shadow-md:     0 8px 20px -8px rgba(0,0,0,.35);
  --ip-shadow-lg:     0 20px 40px -15px rgba(0,0,0,.45);
  --ip-shadow-xl:     0 30px 60px -20px rgba(0,0,0,.5);
  --ip-shadow-glow:   0 20px 40px -15px var(--ip-accent-glow);
  --ip-shadow-inner:  inset 0 1px 0 rgba(255,255,255,.04);

  /* ── GLASS (backdrop-blur) ──────────────────────────────────────── */
  --ip-glass-bg:      rgba(15, 23, 42, 0.6);
  --ip-glass-bg-2:    rgba(30, 41, 59, 0.4);
  --ip-glass-border:  rgba(148,163,184,.12);
  --ip-glass-blur:    12px;

  /* ── MOTION ─────────────────────────────────────────────────────── */
  --ip-motion-fast:   120ms;
  --ip-motion-base:   200ms;
  --ip-motion-slow:   320ms;
  --ip-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ip-ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --ip-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ─────────────────────────────────────────────────────── */
  --ip-sidebar-w:     256px;
  --ip-sidebar-w-collapsed: 64px;
  --ip-topbar-h:      60px;
  --ip-bottom-nav-h:  68px;
  --ip-container:     1280px;

  /* ── Z-INDEX ────────────────────────────────────────────────────── */
  --ip-z-bg:          0;
  --ip-z-content:     1;
  --ip-z-sticky:      20;
  --ip-z-sidebar:     30;
  --ip-z-bottom-nav:  40;
  --ip-z-topbar:      50;
  --ip-z-overlay:     60;
  --ip-z-modal:       70;
  --ip-z-tooltip:     80;
  --ip-z-toast:       90;
}

/* ═══════════════════════════════════════════════════════════════════
   SUB-BRAND OVERRIDES
   Применяется через data-brand на <html> или <body>.
   Переопределяет только --ip-accent* и градиент.
═══════════════════════════════════════════════════════════════════ */

[data-brand="tatfarm"] {
  --ip-accent:       #10b981;
  --ip-accent-hi:    #34d399;
  --ip-accent-dim:   #059669;
  --ip-accent-soft:  rgba(16,185,129,.14);
  --ip-accent-ring:  rgba(16,185,129,.35);
  --ip-accent-glow:  rgba(16,185,129,.28);
  --ip-gradient-accent: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%);
}

[data-brand="esp"] {
  --ip-accent:       #6366f1;              /* индиго — оставляем исторический */
  --ip-accent-hi:    #818cf8;
  --ip-accent-dim:   #4f46e5;
  --ip-accent-soft:  rgba(99,102,241,.14);
  --ip-accent-ring:  rgba(99,102,241,.35);
  --ip-accent-glow:  rgba(99,102,241,.28);
  --ip-gradient-accent: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
}

[data-brand="oilguard"] {
  --ip-accent:       #06b6d4;              /* циан */
  --ip-accent-hi:    #22d3ee;
  --ip-accent-dim:   #0891b2;
  --ip-accent-soft:  rgba(6,182,212,.14);
  --ip-accent-ring:  rgba(6,182,212,.35);
  --ip-accent-glow:  rgba(6,182,212,.28);
  --ip-gradient-accent: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

[data-brand="intero"] {
  --ip-accent:       #22d3ee;              /* teal-cyan */
  --ip-accent-hi:    #67e8f9;
  --ip-accent-dim:   #0e7490;
  --ip-accent-soft:  rgba(34,211,238,.14);
  --ip-accent-ring:  rgba(34,211,238,.35);
  --ip-accent-glow:  rgba(34,211,238,.28);
  --ip-gradient-accent: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #8b5cf6 100%);
}

[data-brand="komitet"] {
  --ip-accent:       #1B5E37;              /* тёмно-зелёный исторический */
  --ip-accent-hi:    #2E7D4A;
  --ip-accent-dim:   #134928;
  --ip-accent-soft:  rgba(27,94,55,.14);
  --ip-accent-ring:  rgba(27,94,55,.35);
  --ip-accent-glow:  rgba(27,94,55,.30);
  --ip-gradient-accent: linear-gradient(135deg, #1B5E37 0%, #2E7D4A 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE (только Komitet по умолчанию; остальным — opt-in)
═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --ip-bg:            #f8fafc;
  --ip-bg-2:          #f1f5f9;
  --ip-surface:       #ffffff;
  --ip-surface-2:     #f1f5f9;
  --ip-surface-raised: #ffffff;
  --ip-border:        rgba(15,23,42,.08);
  --ip-border-strong: rgba(15,23,42,.16);
  --ip-divider:       rgba(15,23,42,.06);

  --ip-text:          #0f172a;
  --ip-text-soft:     #334155;
  --ip-text-muted:    #64748b;
  --ip-text-faint:    #94a3b8;

  --ip-glass-bg:      rgba(255, 255, 255, 0.7);
  --ip-glass-bg-2:    rgba(241, 245, 249, 0.6);
  --ip-glass-border:  rgba(15,23,42,.08);

  --ip-shadow-md:     0 8px 20px -8px rgba(15,23,42,.15);
  --ip-shadow-lg:     0 20px 40px -15px rgba(15,23,42,.20);

  --ip-gradient-hero:
    radial-gradient(ellipse at top left,  rgba(16,185,129,.08), transparent 50%),
    radial-gradient(ellipse at top right, rgba(59,130,246,.06), transparent 50%);
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES (опционально, если не используется Tailwind)
═══════════════════════════════════════════════════════════════════ */

.ip-glass {
  background: var(--ip-glass-bg);
  backdrop-filter: blur(var(--ip-glass-blur));
  -webkit-backdrop-filter: blur(var(--ip-glass-blur));
  border: 1px solid var(--ip-glass-border);
}

.ip-glass-2 {
  background: var(--ip-glass-bg-2);
  backdrop-filter: blur(calc(var(--ip-glass-blur) * 0.7));
  border: 1px solid var(--ip-glass-border);
}

.ip-gradient-text {
  background: var(--ip-gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ip-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: ip-pulse-ring 2s ease-out infinite;
}

@keyframes ip-pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.4; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes ip-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ip-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ip-spin {
  to { transform: rotate(360deg); }
}

.ip-anim-fade-in  { animation: ip-fade-in   var(--ip-motion-slow) var(--ip-ease-out); }
.ip-anim-slide-up { animation: ip-slide-up  var(--ip-motion-slow) var(--ip-ease-out); }

/* ═══════════════════════════════════════════════════════════════════
   BASE RESET & TYPOGRAPHY (минимум, не переопределяет Tailwind)
═══════════════════════════════════════════════════════════════════ */

:where(html, body) {
  font-family: var(--ip-font-sans);
  background: var(--ip-bg);
  color: var(--ip-text);
}

:where(html) {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

:where(h1,h2,h3,h4,h5,h6) {
  font-family: var(--ip-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

:where(code, pre, .font-mono) {
  font-family: var(--ip-font-mono);
}

:where(::-webkit-scrollbar)        { width: 8px; height: 8px; }
:where(::-webkit-scrollbar-track)  { background: var(--ip-bg-2); }
:where(::-webkit-scrollbar-thumb)  { background: var(--ip-border-strong); border-radius: 4px; }
:where(::-webkit-scrollbar-thumb:hover) { background: var(--ip-text-faint); }

:where(*:focus-visible) {
  outline: 2px solid var(--ip-accent-ring);
  outline-offset: 2px;
  border-radius: var(--ip-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   Tailwind preset hook (опционально)
   Если проект использует Tailwind, в его config добавить:
     theme.extend.colors.ip = { ... var(--ip-*) }
   Пример в snippets/react/tailwind.config.snippet.js
═══════════════════════════════════════════════════════════════════ */