/* ============================================================
   insAIder · Design Tokens
   Единый источник правды для всех проектов Kenkost / insAIder.
   Версия: 1.0 · Май 2026

   Этот файл импортируется в каждый проект первой строкой.
   Любой новый компонент должен использовать ТОЛЬКО эти переменные,
   а не сырые hex-значения.
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────────────────
     BRAND COLORS — фирменные цвета из логотипа insAIder.
     ЭТО ОСНОВА ВСЕХ ПРОЕКТОВ. Логотип определяет палитру.
     ───────────────────────────────────────────────────────── */
  --brand-navy:        #0F1B3D;   /* основной, из лого. Солидность, экспертиза */
  --brand-cyan:        #00D4FF;   /* AI-акцент, из лого. ТОЛЬКО для AI-моментов */
  --brand-coral:       #FF6B47;   /* CTA-акцент, оммаж к Kenkost/1С */

  /* ─────────────────────────────────────────────────────────
     NAVY SCALE — производная от brand-navy #0F1B3D
     ───────────────────────────────────────────────────────── */
  --navy-900: #0A1330;            /* самый тёмный */
  --navy-800: #0F1B3D;            /* = brand-navy */
  --navy-700: #1A2750;
  --navy-600: #2C3B65;
  --navy-500: #475471;
  --navy-400: #6B7795;            /* для muted-текста */
  --navy-300: #94A3B8;            /* legacy Slate, для совместимости */
  --navy-200: #CBD5E1;
  --navy-100: #E2E8F0;            /* стандартный border */
  --navy-50:  #F1F5F9;
  --navy-25:  #F8FAFC;            /* bg-app */

  /* ─────────────────────────────────────────────────────────
     CYAN — AI-моменты + рабочий accent для графиков
     - cyan-500 = brand-cyan, ТОЛЬКО AI-моменты (бейдж, hero-glow)
     - cyan-700 #006A88 — приглушённый, для графиков / sparklines / progress
       (это "рабочий" акцент в UI, чтобы не использовать чистый #00D4FF везде)
     ───────────────────────────────────────────────────────── */
  --cyan-900: #003D4F;
  --cyan-800: #005570;
  --cyan-700: #006A88;            /* рабочий accent: графики, sparkline, кнопки */
  --cyan-600: #0090B8;
  --cyan-500: #00D4FF;            /* = brand-cyan, AI-моменты */
  --cyan-400: #5CE5F5;
  --cyan-300: rgba(0,212,255,0.30);
  --cyan-100: rgba(0,212,255,0.12);
  --cyan-50:  rgba(0,212,255,0.06);
  --cyan-bg:  #E6F8FE;            /* soft cyan для бейджей и фонов */

  /* ─────────────────────────────────────────────────────────
     LEGACY TEAL — в текущих проектах используется #2099A8.
     Сохранили для миграции. Новые проекты — НЕ использовать.
     Заменять: teal-кнопки → navy, teal-графики → cyan-700.
     ───────────────────────────────────────────────────────── */
  --legacy-teal-700: #0F6B73;
  --legacy-teal-600: #1A8590;
  --legacy-teal-500: #2099A8;
  --legacy-teal-300: #5eead4;
  --legacy-teal-50:  #ECFAF8;

  /* ─────────────────────────────────────────────────────────
     ALIASES — для обратной совместимости и удобства
     Старые имена .badge--teal, --teal-500 теперь указывают
     на cyan-палитру из брендового логотипа.
     ───────────────────────────────────────────────────────── */
  --teal-700: var(--cyan-900);    /* тёмный текст бейджей */
  --teal-600: var(--cyan-800);    /* hover */
  --teal-500: var(--cyan-700);    /* основной рабочий акцент = #006A88 */
  --teal-400: var(--cyan-600);
  --teal-300: var(--cyan-400);    /* highlight */
  --teal-200: rgba(0,212,255,0.18);
  --teal-100: rgba(0,212,255,0.10);
  --teal-50:  var(--cyan-bg);

  --brand-teal: var(--cyan-700);  /* для миграционных классов */
  --brand-teal-soft: var(--cyan-400);
  --gradient-teal: var(--gradient-cyan);

  /* ─────────────────────────────────────────────────────────
     GRADIENTS — для логотипа, hero, AI-моментов
     ───────────────────────────────────────────────────────── */
  --iridescent: linear-gradient(135deg, #0080A8 0%, #00D4FF 35%, #A8F1FA 55%, #00D4FF 75%, #00A8C8 100%);
  --gradient-cyan: linear-gradient(135deg, #00D4FF 0%, #006A88 100%);
  --gradient-cyan-soft: linear-gradient(135deg, rgba(0,212,255,0.15) 0%, rgba(0,106,136,0.10) 100%);
  --gradient-dark-hero: linear-gradient(135deg, #0A1330 0%, #0F1B3D 50%, #1A2750 100%);

  /* ─────────────────────────────────────────────────────────
     STATUS — статусные цвета (фактические из проектов)
     ───────────────────────────────────────────────────────── */
  --red-700:    #991B1B;
  --red-600:    #DC2626;          /* основной red, везде в проектах */
  --red-500:    #EF4444;
  --red-100:    #FECACA;
  --red-50:     #FEF2F2;          /* soft red bg (фактический) */

  --orange-700: #B45309;
  --orange-600: #D97706;          /* warning во многих проектах */
  --orange-500: #F59E0B;          /* alt warning, более яркий */
  --orange-400: #F97316;          /* fire / hot */
  --orange-100: #FED7AA;
  --orange-50:  #FFFBEB;          /* warning-banner bg */

  --green-700:  #15803D;
  --green-600:  #16A34A;          /* основной success */
  --green-500:  #10B981;          /* alt success, более emerald */
  --green-100:  #BBF7D0;
  --green-50:   #DCFCE7;          /* soft green bg (фактический) */

  --yellow-700: #A16207;
  --yellow-50:  #FFFBEB;          /* warning-banner bg */

  --blue-700:   #0369A1;          /* info-текст */
  --blue-600:   #0284C7;
  --blue-50:    #E0F2FE;          /* info-banner bg */

  --purple-600: #8B5CF6;          /* loyalty / special */
  --purple-50:  #F3E8FF;

  /* ─────────────────────────────────────────────────────────
     CORAL — фирменный акцент для CTA альтернатив, важных меток
     ───────────────────────────────────────────────────────── */
  --coral-700: #9B3315;
  --coral-600: #C24A24;
  --coral-500: #FF6B47;           /* = brand-coral */
  --coral-100: #FFD9CB;
  --coral-50:  #FFEBE2;

  /* ─────────────────────────────────────────────────────────
     SURFACES — фоны, поверхности (фактические из проектов)
     ───────────────────────────────────────────────────────── */
  --bg-app:       #F8FAFC;        /* фон приложения — фактический Slate-50 */
  --bg-app-warm:  #F7F6F2;        /* тёплый off-white (опц.) */
  --surface:      #FFFFFF;        /* карточки */
  --surface-2:    #F1F5F9;        /* вложенные / hover (Slate-100) */
  --surface-3:    #E2E8F0;        /* приглушённый bg (Slate-200) */
  --surface-dark: #0F172A;        /* dark navy hero / header */
  --surface-dark-2: #0B1220;      /* самый тёмный */
  --surface-dark-3: #1E293B;      /* тёмная карточка внутри */
  --surface-dark-4: #1e3a5f;      /* hero gradient end */

  /* ─────────────────────────────────────────────────────────
     BORDERS (фактические из проектов: E2E8F0 = Slate-200)
     ───────────────────────────────────────────────────────── */
  --border:        #E2E8F0;       /* стандартная граница (Slate-200) */
  --border-soft:   #F1F5F9;       /* мягкая граница */
  --border-strong: #CBD5E1;       /* выделенная (Slate-300) */
  --border-focus:  #00D4FF;       /* focus state */

  /* ─────────────────────────────────────────────────────────
     TEXT (фактические из проектов: Slate scale)
     ───────────────────────────────────────────────────────── */
  --text-primary:   #0F172A;      /* основной текст (Slate-900) */
  --text-secondary: #475569;      /* вторичный (Slate-600) */
  --text-tertiary:  #64748B;      /* третичный (Slate-500) */
  --text-muted:     #94A3B8;      /* приглушённый (Slate-400) */
  --text-disabled:  #CBD5E1;
  --text-inverse:   #FFFFFF;

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY
     - Inter — основной UI шрифт
     - JetBrains Mono — числа, коды, timestamps, uppercase-капшены
     - Space Grotesk — ТОЛЬКО для логотипа insAIder
     ───────────────────────────────────────────────────────── */
  --font-ui:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-brand:  'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* размер шрифтов · scale 1.125 */
  --text-xs:     11px;
  --text-sm:     13.5px;
  --text-base:   15px;
  --text-md:     15.5px;
  --text-lg:     17px;
  --text-xl:     20px;
  --text-2xl:    24px;
  --text-3xl:    30px;
  --text-4xl:    38px;
  --text-5xl:    48px;
  --text-6xl:    64px;

  /* ─────────────────────────────────────────────────────────
     RADII
     ───────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;             /* стандартные карточки KPI */
  --radius-lg: 14px;             /* hero-карточки */
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────
     SPACING (8px-сетка)
     ───────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─────────────────────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px -2px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 40px -16px rgba(15,23,42,0.16);
  --shadow-xl: 0 40px 80px -30px rgba(15,23,42,0.20), 0 12px 30px -12px rgba(15,23,42,0.10);
  --shadow-hover: 0 8px 24px -8px rgba(32,153,168,0.20);
  --glow-cyan: 0 0 24px rgba(0,212,255,0.35);
  --glow-teal: 0 0 24px rgba(32,153,168,0.30);

  /* ─────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;

  /* ─────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: 32px;
  --sidebar-w:     240px;
  --sidebar-rail:  64px;
}

/* iridescent gradient · для логотипа и AI-моментов */
:root {
  --iridescent: linear-gradient(135deg, #0080A8 0%, #00D4FF 35%, #A8F1FA 55%, #00D4FF 75%, #00A8C8 100%);
}