/* ================================================================
   WERK Design System v2 — Tokens
   Glass Dark Premium + Data-Rich + RPG
   ----------------------------------------------------------------
   Подключается ТОЛЬКО когда активен флаг v2.* и пользователь
   integration_n8n. Старые токены в main.css не трогаются.
   ================================================================ */

:root,
[data-v2-theme="glass"] {
  /* ============ BACKGROUND (Apple Dark grey, lighter than OLED) ============ */
  --v2-bg-deep:        #13151C;
  --v2-bg-surface:     #181B23;
  --v2-bg-elevated:    #22252F;
  --v2-bg-card:        #262A35;
  --v2-bg-card-hi:     #2E323F;
  --v2-bg-overlay:     rgba(19, 21, 28, 0.72);
  --v2-bg-glass:       rgba(38, 42, 53, 0.6);
  --v2-bg-glass-light: rgba(255, 255, 255, 0.04);

  /* ============ BORDERS ============ */
  --v2-border-soft:   rgba(255, 255, 255, 0.08);
  --v2-border-strong: rgba(255, 255, 255, 0.14);
  --v2-border-stronger: rgba(255, 255, 255, 0.22);
  --v2-border-accent: rgba(249, 115, 22, 0.30);

  /* ============ TEXT ============ */
  --v2-text-primary:   #F5F5F7;
  --v2-text-secondary: #A4A8B5;
  --v2-text-muted:     #6C7280;
  --v2-text-dim:       #3F4250;
  --v2-text-inverse:   #0A0A0F;

  /* ============ ACCENT (WERK orange — match mockup) ============ */
  --v2-accent:        #FF6B35;
  --v2-accent-bright: #FF8C5E;
  --v2-accent-deep:   #C2410C;
  --v2-accent-glow:   rgba(255, 107, 53, 0.35);

  /* Aliases (используются в v2-screens.css в разных местах) */
  --v2-orange:        var(--v2-accent);
  --v2-orange-bright: var(--v2-accent-bright);
  --v2-orange-deep:   var(--v2-accent-deep);
  --v2-text-sec:      var(--v2-text-secondary);
  --v2-text-mut:      var(--v2-text-muted);

  /* ============ SEMANTIC ============ */
  --v2-success: #34D399; --v2-success-glow: rgba(52, 211, 153, 0.25);
  --v2-warning: #FBBF24; --v2-warning-glow: rgba(251, 191, 36, 0.25);
  --v2-danger:  #F87171; --v2-danger-glow:  rgba(248, 113, 113, 0.25);
  --v2-info:    #60A5FA; --v2-info-glow:    rgba(96, 165, 250, 0.25);

  /* ============ ROLE COLORS ============ */
  --v2-role-manager:  #F97316;
  --v2-role-loader:   #60A5FA;
  --v2-role-keeper:   #34D399;
  --v2-role-director: #A78BFA;
  --v2-role-admin:    #FBBF24;

  /* ============ CHART COLORS ============ */
  --v2-chart-1: #F97316;
  --v2-chart-2: #60A5FA;
  --v2-chart-3: #34D399;
  --v2-chart-4: #A78BFA;
  --v2-chart-5: #FBBF24;
  --v2-chart-6: #F87171;

  /* ============ SPACING (4px grid) ============ */
  --v2-space-0:  0;
  --v2-space-1:  4px;
  --v2-space-2:  8px;
  --v2-space-3:  12px;
  --v2-space-4:  16px;
  --v2-space-5:  20px;
  --v2-space-6:  24px;
  --v2-space-8:  32px;
  --v2-space-10: 40px;
  --v2-space-12: 48px;
  --v2-space-16: 64px;
  --v2-space-20: 80px;

  /* ============ TYPOGRAPHY ============ */
  --v2-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --v2-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --v2-font-display: 'Exo 2', 'Inter', sans-serif; /* RPG-экраны */

  --v2-fs-xs:   11px; --v2-lh-xs:   16px;
  --v2-fs-sm:   13px; --v2-lh-sm:   18px;
  --v2-fs-base: 15px; --v2-lh-base: 22px;
  --v2-fs-md:   17px; --v2-lh-md:   24px;
  --v2-fs-lg:   20px; --v2-lh-lg:   28px;
  --v2-fs-xl:   24px; --v2-lh-xl:   32px;
  --v2-fs-2xl:  32px; --v2-lh-2xl:  40px;
  --v2-fs-3xl:  44px; --v2-lh-3xl:  52px;

  --v2-fw-regular: 400;
  --v2-fw-medium:  500;
  --v2-fw-semi:    600;
  --v2-fw-bold:    700;
  --v2-fw-black:   800;

  /* ============ RADII ============ */
  --v2-r-xs:   6px;
  --v2-r-sm:   10px;
  --v2-r-md:   16px;
  --v2-r-lg:   22px;
  --v2-r-xl:   28px;
  --v2-r-full: 9999px;

  /* ============ SHADOWS ============ */
  --v2-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);

  --v2-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                 0 1px 2px rgba(0, 0, 0, 0.4),
                 0 8px 24px rgba(0, 0, 0, 0.35);

  --v2-shadow-3: 0 20px 60px rgba(0, 0, 0, 0.55),
                 0 4px 12px rgba(0, 0, 0, 0.4);

  --v2-shadow-accent:  0 0 0 1px rgba(249, 115, 22, 0.25) inset,
                       0 8px 24px rgba(249, 115, 22, 0.18);

  --v2-shadow-success: 0 0 0 1px rgba(52, 211, 153, 0.25) inset,
                       0 8px 24px rgba(52, 211, 153, 0.18);

  --v2-shadow-danger:  0 0 0 1px rgba(248, 113, 113, 0.25) inset,
                       0 8px 24px rgba(248, 113, 113, 0.18);

  /* ============ MOTION ============ */
  --v2-dur-instant: 100ms;
  --v2-dur-fast:    180ms;
  --v2-dur-base:    260ms;
  --v2-dur-slow:    420ms;
  --v2-dur-slower:  640ms;

  --v2-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* iOS standard */
  --v2-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --v2-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce */
  --v2-ease-emphatic: cubic-bezier(0.2, 0, 0, 1);

  /* ============ Z-INDEX ============ */
  --v2-z-base:    0;
  --v2-z-raised:  10;
  --v2-z-sticky:  100;
  --v2-z-overlay: 1000;
  --v2-z-modal:   2000;
  --v2-z-toast:   3000;
}

/* ============ Анимации ============ */
@keyframes v2-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes v2-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}

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

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

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

/* ============ Утилиты для v2-режима ============ */
.v2-fade-in     { animation: v2-fade-in     var(--v2-dur-base) var(--v2-ease-out); }
.v2-slide-up    { animation: v2-slide-up    var(--v2-dur-base) var(--v2-ease-spring); }
.v2-slide-down  { animation: v2-slide-down  var(--v2-dur-base) var(--v2-ease-spring); }
.v2-pulse       { animation: v2-pulse 2s infinite; }
.v2-pulse-glow  { animation: v2-pulse-glow 2s infinite; }