/* B.O.B. — токены как CSS-переменные.
   Портативно: подключается в любой проект без сборщика.
   Светлая тема основная; тёмная переопределяет те же токены. */

:root {
  /* Базовый масштаб. Владелец при каждой загрузке жал Cmd+ один раз — это
     ровно один шаг Safari, 115%. Проценты, а не пиксели: если в браузере
     задан свой размер шрифта по умолчанию, интерфейс отмасштабируется от
     него, а не затрёт его. Всё ниже выражено в rem и едет отсюда целиком —
     и текст, и отступы, и скругления, иначе буквы вырастут, а воздух вокруг
     них останется прежним. */
  font-size: 115%;

  /* цвет */
  --color-paper:   #F4F4F2;
  --color-panel:   #FFFFFF;
  --color-sunken:  #EDEDEA;
  --color-hair:    #E3E3DE;
  --color-ink:     #16161A;
  --color-muted:   #6E6E76;
  --color-faint:   #9A9AA0;
  --color-ember:   #B4541F;
  --color-live:    #2E7D5B;
  --color-alarm:   #A32B1E;

  /* гарнитуры */
  --font-ui:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mark:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-data:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* размеры текста */
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-md:  0.9375rem;
  --text-lg:  1.125rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;

  /* пространство — в rem, чтобы ехало вместе с базовым масштабом.
     Числа те же, что были в пикселях, просто выражены от базы 16. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* форма */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.125rem;
  --radius-full: 999px;

  /* глубина: панели различаются тоном, тень только у всплывающего */
  --shadow-lift: 0 1px 2px rgb(22 22 26 / .04), 0 8px 24px rgb(22 22 26 / .06);

  /* движение */
  --motion-quick: 140ms;
  --motion-calm:  220ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:  #131315;
    --color-panel:  #1B1B1E;
    --color-sunken: #232327;
    --color-hair:   #2E2E33;
    --color-ink:    #F2F2F0;
    --color-muted:  #9C9CA4;
    --color-faint:  #6E6E76;
    --color-ember:  #E08A4E;
    --color-live:   #5FB58C;
    --color-alarm:  #E0705F;
    --shadow-lift:  0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-paper:  #131315;
  --color-panel:  #1B1B1E;
  --color-sunken: #232327;
  --color-hair:   #2E2E33;
  --color-ink:    #F2F2F0;
  --color-muted:  #9C9CA4;
  --color-faint:  #6E6E76;
  --color-ember:  #E08A4E;
  --color-live:   #5FB58C;
  --color-alarm:  #E0705F;
  --shadow-lift:  0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --color-paper:  #F4F4F2;
  --color-panel:  #FFFFFF;
  --color-sunken: #EDEDEA;
  --color-hair:   #E3E3DE;
  --color-ink:    #16161A;
  --color-muted:  #6E6E76;
  --color-faint:  #9A9AA0;
  --color-ember:  #B4541F;
  --color-live:   #2E7D5B;
  --color-alarm:  #A32B1E;
  color-scheme: light;
}