/* ─── 2. Плавная смена темы ─── */
/* Применяется только во время переключения через JS-класс */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* ─── Light theme (default) ─── */
:root {
  /* Accent */
  --color-accent:         #7B61FF;
  --color-accent-hover:   #6A4FE0;
  --color-accent-light:   #EDE9FF;

  /* Backgrounds */
  --color-bg:             #FFFFFF;
  --color-bg-sidebar:     #F7F7F8;
  --color-bg-input:       #F2F2F5;
  --color-bg-bubble-bot:  #F2F2F5;
  --color-bg-bubble-user: #7B61FF;
  --color-bg-modal:       #FFFFFF;
  --color-overlay:        rgba(0, 0, 0, 0.45);

  /* Text */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #8A8A9A;
  --color-text-bubble-user: #FFFFFF;
  --color-text-bubble-bot:  #1A1A1A;
  --color-text-sidebar:   #3D3D4E;

  /* Borders */
  --color-border:         #E8E8EE;
  --color-border-input:   #E0E0EA;

  /* Status */
  --color-error:          #FF4D4F;
  --color-success:        #52C41A;

  /* ─── Sizing ─── */
  --sidebar-width:        220px;
  --sidebar-collapsed:    0px;

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);

  /* Typography */
  --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-md:  15px;
  --font-size-lg:  18px;
  --font-size-xl:  22px;
  --line-height:   1.55;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* Transitions */
  --transition: 0.2s ease;
}

/* ─── Dark theme ─── */
[data-theme="dark"] {
  /* Accent — чуть ярче для темного фона */
  --color-accent:         #9D85FF;
  --color-accent-hover:   #B09AFF;
  --color-accent-light:   #2A2340;

  /* Backgrounds */
  --color-bg:             #131316;
  --color-bg-sidebar:     #1C1C22;
  --color-bg-input:       #25252E;
  --color-bg-bubble-bot:  #25252E;
  --color-bg-bubble-user: #7B61FF;
  --color-bg-modal:       #1C1C22;
  --color-overlay:        rgba(0, 0, 0, 0.65);

  /* Text */
  --color-text-primary:   #F0F0F5;
  --color-text-secondary: #7A7A90;
  --color-text-bubble-user: #FFFFFF;
  --color-text-bubble-bot:  #F0F0F5;
  --color-text-sidebar:   #C0C0D0;

  /* Borders */
  --color-border:         #2E2E3A;
  --color-border-input:   #35353F;

  /* Status */
  --color-error:          #FF6B6B;
  --color-success:        #73D13D;
}