:root {
  /* Поле дати й інші нативні елементи браузер малює сам. Без цього рядка
     він вгадує тему й промахується: на темному екрані текст виходив
     чорним, на світлому — білим, тобто невидимим в обох. */
  color-scheme: dark;
  /* Поверхні. Темна тема основна: працюють переважно вночі. */
  --bg:       #0e141b;
  --surface:  #151d26;
  --raised:   #1b2632;
  --line:     #27333f;
  --line-str: #36444f;

  --ink:   #e2e9f0;
  --muted: #8496a8;
  --dim:   #5d6e7f;

  /* Стани обладнання. НЕ використовуються для кнопок:
     зелений тут означає «норма», а не «натисни мене». */
  --ok:    #35b08f;
  --warn:  #d99a2b;
  --crit:  #e05545;
  --ok-bg:   rgba(53,176,143,.14);
  --warn-bg: rgba(217,154,43,.14);
  --crit-bg: rgba(224,85,69,.14);

  /* Дії. Єдиний колір, яким позначається «тут можна натиснути». */
  --action:      #4d8fd6;
  --action-ink:  #ffffff;
  --action-soft: rgba(77,143,214,.16);

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --r-sm: 5px;
  --r:    8px;
  --r-lg: 14px;

  /* Мінімальна ціль для дотику. 44px — щоб працювало в рукавицях. */
  --touch: 44px;

  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap:    14px;
  --gap-lg: 20px;

  --shadow: 0 8px 28px rgba(0,0,0,.45);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:       #eef1f4;
  --surface:  #ffffff;
  --raised:   #f3f6f8;
  --line:     #dbe1e7;
  --line-str: #c4ccd4;

  --ink:   #17202a;
  --muted: #5b6b7a;
  --dim:   #8494a3;

  --ok:   #10735c;
  --warn: #9a6407;
  --crit: #b7281a;
  --ok-bg:   rgba(16,115,92,.10);
  --warn-bg: rgba(154,100,7,.10);
  --crit-bg: rgba(183,40,26,.10);

  --action:      #1f66b0;
  --action-soft: rgba(31,102,176,.12);

  --shadow: 0 8px 28px rgba(20,30,40,.14);
}