/* Палитра и размеры. Две темы, переключаются атрибутом data-theme на <html>. */

:root {
  --bg:          #f6f7f9;
  --surface:     #ffffff;
  --surface-alt: #f0f2f5;
  --border:      #dfe3e8;
  --border-soft: #eceff3;

  --text:        #1a1d21;
  --text-muted:  #6b7280;
  --text-faint:  #9aa1ab;

  --accent:      #2563eb;
  --accent-soft: #e8effe;
  --accent-text: #ffffff;

  --ok:          #15803d;
  --ok-soft:     #e7f6ec;
  --warn:        #b45309;
  --warn-soft:   #fdf2e2;
  --bad:         #b91c1c;
  --bad-soft:    #fdeaea;

  /* Заливка клетки в ведомости — отдельно от *-soft, и вот почему.
     Бледный *-soft лежит под ЦВЕТНЫМ текстом (бейджи, оценки) и обязан
     оставаться бледным, иначе текст на нём перестанет читаться. Здесь
     же фон лежит под обычным тёмным текстом ответа, а сам цвет читают
     не по одной клетке, а взглядом вдоль строки из десяти. На такой
     работе бледная заливка не работает вовсе: полоса выглядит ровной, и
     верное от неверного отличает только тонкая рамка. */
  --ok-fill:     #b5e6c4;
  --warn-fill:   #fadfb0;
  --bad-fill:    #f9bcbc;

  --radius:      8px;
  --radius-sm:   5px;
  --shadow:      0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg:          #14171c;
  --surface:     #1c2027;
  --surface-alt: #22272f;
  --border:      #2e3540;
  --border-soft: #262c34;

  --text:        #e6e9ee;
  --text-muted:  #9aa3b0;
  --text-faint:  #6c7480;

  --accent:      #4c8dff;
  --accent-soft: #1d2a42;
  --accent-text: #0d1117;

  --ok:          #4ade80;
  --ok-soft:     #17301f;
  --warn:        #fbbf24;
  --warn-soft:   #332615;
  --bad:         #f87171;
  --bad-soft:    #3a1c1c;

  /* В тёмной теме текст в клетке светлый, поэтому заливка идёт в другую
     сторону — глубже и насыщеннее, а не светлее. */
  --ok-fill:     #1e5233;
  --warn-fill:   #4d3810;
  --bad-fill:    #6b2525;

  --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
}