/* ═══════════════════════════════════════════════════════════════════════
 * design-tokens.css — Production Design System (v200.0 — Redesign)
 *
 * Принципы:
 *  - 8px grid (4px для микро-отступов)
 *  - Type scale 1.2 (minor third) для harmony
 *  - Color hierarchy: bg → surface → surface-2 → surface-3 (4 уровня elevation)
 *  - Semantic colors: text/text-2/text-3/muted; accent/success/warn/danger/info
 *  - Motion: 120/180/240ms с правильной cubic-bezier
 *  - Shadows: 5 elevation levels (Apple-style)
 *  - Radius: 4/6/8/12/16/full
 *  - Breakpoints: sm 640, md 768, lg 1024, xl 1280, 2xl 1536
 *
 * Источник истины. Все компоненты ссылаются на эти переменные.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ───── COLOR PALETTE — Light theme ───── */

  /* Neutral (10 шагов) */
  --gray-0:  #ffffff;
  --gray-50: #f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-400:#9ca3af;
  --gray-500:#6b7280;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;
  --gray-950:#030712;

  /* Brand — Indigo/Purple (CRM accent) */
  --brand-50: #eef0ff;
  --brand-100:#e0e3ff;
  --brand-200:#c7cbff;
  --brand-300:#a4a8ff;
  --brand-400:#857df8;
  --brand-500:#6C5CE7;  /* main */
  --brand-600:#5b4dd9;
  --brand-700:#4a3fb8;
  --brand-800:#3b3293;
  --brand-900:#2c2670;

  /* Semantic */
  --success-50:#ecfdf5;
  --success-100:#d1fae5;
  --success-500:#10b981;
  --success-600:#059669;
  --success-700:#047857;

  --warn-50:#fffbeb;
  --warn-100:#fef3c7;
  --warn-500:#f59e0b;
  --warn-600:#d97706;
  --warn-700:#b45309;

  --danger-50:#fef2f2;
  --danger-100:#fee2e2;
  --danger-500:#ef4444;
  --danger-600:#dc2626;
  --danger-700:#b91c1c;

  --info-50:#eff6ff;
  --info-100:#dbeafe;
  --info-500:#3b82f6;
  --info-600:#2563eb;
  --info-700:#1d4ed8;

  /* ───── SEMANTIC TOKENS (используются в компонентах) ───── */

  /* Backgrounds — elevation levels */
  --bg:           var(--gray-50);
  --surface:      var(--gray-0);
  --surface-2:    var(--gray-100);
  --surface-3:    var(--gray-200);
  --surface-hover:var(--gray-100);

  /* Text */
  --text:         var(--gray-900);
  --text-2:       var(--gray-700);
  --text-3:       var(--gray-500);
  --muted:        var(--gray-500);
  --text-on-brand:var(--gray-0);
  --text-disabled:var(--gray-400);

  /* Borders */
  --border:       var(--gray-200);
  --border-2:     var(--gray-300);
  --border-strong:var(--gray-400);
  --border-focus: var(--brand-500);

  /* Brand */
  --accent:       var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-soft:  var(--brand-100);
  --accent-text:  var(--brand-700);

  /* Semantic */
  --success:      var(--success-500);
  --success-soft: var(--success-50);
  --warn:         var(--warn-500);
  --warn-soft:    var(--warn-50);
  --danger:       var(--danger-500);
  --danger-hover: var(--danger-600);
  --danger-soft:  var(--danger-50);
  --info:         var(--info-500);
  --info-soft:    var(--info-50);

  /* ───── TYPOGRAPHY — minor-third scale (×1.2) ───── */

  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:  11px;   /* meta, badges */
  --fs-sm:  12px;   /* secondary text, labels */
  --fs-md:  13px;   /* body default */
  --fs-lg:  15px;   /* emphasized body */
  --fs-xl:  18px;   /* H3 / section title */
  --fs-2xl: 22px;   /* H2 / page title */
  --fs-3xl: 28px;   /* H1 (rare) */

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Letter spacing — для caps/labels */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-caps:   0.05em;

  /* ───── 8PX GRID — SPACING ───── */

  --sp-0:  0;
  --sp-1:  4px;     /* micro */
  --sp-2:  8px;     /* base */
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ───── RADIUS ───── */

  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-3xl:  20px;
  --r-full: 999px;

  /* ───── SHADOWS — Apple-like elevation ───── */

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 20px -3px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 40px -10px rgba(15, 23, 42, 0.15), 0 10px 16px -6px rgba(15, 23, 42, 0.08);
  --shadow-2xl:0 30px 60px -20px rgba(15, 23, 42, 0.20);

  /* Внутренняя/inset для нажатых состояний */
  --shadow-inset-xs: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* ───── MOTION ───── */

  --duration-instant: 0ms;
  --duration-fast:    120ms;
  --duration-base:    180ms;
  --duration-slow:    240ms;
  --duration-slower:  320ms;

  /* Apple curves */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ───── Z-INDEX — единая шкала, без хаоса ───── */

  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    1000;
  --z-modal:      2000;
  --z-popover:    3000;
  --z-tooltip:    4000;
  --z-toast:      5000;
  --z-max:        9999;

  /* ───── BREAKPOINTS (для JS / container queries) ───── */

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ───── COMPONENT-LEVEL TOKENS ───── */

  --input-height:    32px;
  --input-height-lg: 40px;
  --button-height:   32px;
  --button-height-lg:40px;
  --button-height-sm:24px;
  --topbar-height:   56px;
  --sidebar-width:   240px;
  --sidebar-collapsed:56px;
  --modal-radius:    var(--r-xl);
  --card-radius:     var(--r-lg);
  --avatar-size:     32px;

  /* Focus ring */
  --focus-ring:      0 0 0 3px rgba(108, 92, 231, 0.25);
  --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* ═══ DARK THEME ═══ */

[data-theme="dark"], .theme-dark {
  --bg:           #0a0d14;
  --surface:      #131722;
  --surface-2:    #1b2030;
  --surface-3:    #252b3d;
  --surface-hover:#1f2538;

  --text:         #f3f4f6;
  --text-2:       #d1d5db;
  --text-3:       #9ca3af;
  --muted:        #9ca3af;
  --text-disabled:#4b5563;

  --border:       #252b3d;
  --border-2:     #313747;
  --border-strong:#404858;

  /* Accent чуть ярче в тёмной теме */
  --accent:       #857df8;
  --accent-hover: #a4a8ff;
  --accent-soft:  rgba(133, 125, 248, 0.15);
  --accent-text:  #a4a8ff;

  /* Semantic в тёмной теме — soft фоны более насыщенные */
  --success-soft: rgba(16, 185, 129, 0.12);
  --warn-soft:    rgba(245, 158, 11, 0.12);
  --danger-soft:  rgba(239, 68, 68, 0.12);
  --info-soft:    rgba(59, 130, 246, 0.12);

  /* Shadows слабее в dark mode (no glow) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.65);

  --focus-ring: 0 0 0 3px rgba(133, 125, 248, 0.35);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}

/* High contrast */
@media (prefers-contrast: more) {
  :root {
    --border:        var(--gray-400);
    --border-2:      var(--gray-500);
    --focus-ring:    0 0 0 3px var(--brand-700);
  }
}