/* ============================================================
   Токены — светлая тема (по умолчанию)
   ============================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Поверхности */
  --bg:            #f5f6f8;
  --surface:       #ffffff;
  --surface-2:     #eaecef;
  --border:        #e5e7eb;
  --border-strong: #d1d5db;

  /* Текст */
  --text:       #1c1f23;
  --text-muted: #6b7280;
  --text-soft:  #9ca3af;

  /* Акцент */
  --accent:       #3b82f6;
  --accent-hover: #2563eb;
  --accent-soft:  rgba(59, 130, 246, 0.12);

  /* Семантика */
  --danger: #ef4444;
  --ok:     #16a34a;

  /* Полупрозрачные слои */
  --header-bg:      rgba(255, 255, 255, 0.75);
  --overlay-soft:   rgba(0, 0, 0, 0.04);
  --overlay:        rgba(0, 0, 0, 0.06);
  --overlay-strong: rgba(255, 255, 255, 0.55);
  --input-bg:       #ffffff;
  --add-list-bg:    rgba(255, 255, 255, 0.5);
  --add-card-hover: rgba(255, 255, 255, 0.7);

  /* Drag & drop */
  --drop-bg:      #dbeafe;
  --drop-bg-soft: rgba(59, 130, 246, 0.08);
  --drop-outline: rgba(59, 130, 246, 0.4);

  /* Скроллбары */
  --scrollbar:      rgba(0, 0, 0, 0.12);
  --scrollbar-soft: rgba(0, 0, 0, 0.10);

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 6px 16px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);

  /* Радиусы */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* Прочее */
  --speed: 150ms;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
          "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   Токены — тёмная тема
   ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0f1115;
  --surface:       #1a1d23;
  --surface-2:     #232730;
  --border:        #2a2f38;
  --border-strong: #3a4150;

  --text:       #e6e8ec;
  --text-muted: #9ca3af;
  --text-soft:  #6b7280;

  --accent:       #60a5fa;
  --accent-hover: #3b82f6;
  --accent-soft:  rgba(96, 165, 250, 0.15);

  --danger: #f87171;
  --ok:     #4ade80;

  --header-bg:      rgba(15, 17, 21, 0.75);
  --overlay-soft:   rgba(255, 255, 255, 0.04);
  --overlay:        rgba(255, 255, 255, 0.06);
  --overlay-strong: rgba(255, 255, 255, 0.08);
  --input-bg:       #232730;
  --add-list-bg:    rgba(255, 255, 255, 0.03);
  --add-card-hover: rgba(255, 255, 255, 0.06);

  --drop-bg:      rgba(96, 165, 250, 0.15);
  --drop-bg-soft: rgba(96, 165, 250, 0.10);
  --drop-outline: rgba(96, 165, 250, 0.5);

  --scrollbar:      rgba(255, 255, 255, 0.12);
  --scrollbar-soft: rgba(255, 255, 255, 0.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 6px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}

/* ============================================================
   Reset
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background var(--speed) ease, color var(--speed) ease;
}

[hidden] { display: none !important; }