/* ============================================
   Дизайн-токены (CSS Custom Properties)
   ============================================ */

:root {
  /* --- Цвета --- */
  --color-primary:        #1A56DB;
  --color-primary-dark:   #1040A0;
  --color-primary-light:  #E8EFFC;
  --color-primary-hover:  #1648BD;
  --color-primary-rgb:    26, 86, 219;

  --color-bg:             #FFFFFF;
  --color-surface:        #F8F9FB;
  --color-surface-hover:  #EEF1F6;

  --color-border:         #D1D5DB;
  --color-border-light:   #E5E7EB;

  --color-text:           #1F2937;
  --color-text-secondary: #6B7280;
  --color-text-muted:     #9CA3AF;

  --color-accent:         #475569;

  --color-success:        #059669;
  --color-success-bg:     #ECFDF5;
  --color-error:          #DC2626;
  --color-error-bg:       #FEF2F2;
  --color-warning:        #D97706;
  --color-warning-bg:     #FFFBEB;

  /* --- Типографика --- */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        1.875rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.625;

  /* --- Отступы --- */
  --spacing-xs:           0.25rem;
  --spacing-sm:           0.5rem;
  --spacing-md:           1rem;
  --spacing-lg:           1.5rem;
  --spacing-xl:           2rem;
  --spacing-2xl:          3rem;

  /* --- Радиусы --- */
  --radius-sm:            0.375rem;
  --radius-md:            0.5rem;
  --radius-lg:            0.75rem;
  --radius-xl:            1rem;
  --radius-full:          9999px;

  /* --- Тени --- */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-focus:         0 0 0 3px rgba(var(--color-primary-rgb), 0.25);

  /* --- Переходы --- */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      350ms ease;

  /* --- Размеры layout --- */
  --header-height:        64px;
  --sidebar-width:        260px;
}

/* ============================================
   Тёмная тема
   ============================================ */
[data-theme="dark"] {
  --color-primary:        #6366F1;
  --color-primary-dark:   #818CF8;
  --color-primary-light:  rgba(99, 102, 241, 0.15);
  --color-primary-hover:  #7C3AED;
  --color-primary-rgb:    99, 102, 241;

  --color-bg:             #1E293B;
  --color-surface:        #0F172A;
  --color-surface-hover:  #334155;

  --color-border:         #475569;
  --color-border-light:   #334155;

  --color-text:           #F1F5F9;
  --color-text-secondary: #CBD5E1;
  --color-text-muted:     #94A3B8;

  --color-accent:         #94A3B8;

  --color-success:        #34D399;
  --color-success-bg:     rgba(52, 211, 153, 0.12);
  --color-error:          #F87171;
  --color-error-bg:       rgba(248, 113, 113, 0.12);
  --color-warning:        #FBBF24;
  --color-warning-bg:     rgba(251, 191, 36, 0.12);

  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:            0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg:            0 10px 20px rgba(0, 0, 0, 0.4);
  --shadow-focus:         0 0 0 3px rgba(var(--color-primary-rgb), 0.35);
}