/* ============================================================
   URRYES — Система дизайна (токены)
   Палитра: сепия/пергамент, акценты из аватара (охра, тёмно-красный, графит).
   Все цвета — переменные на :root, с переопределением для тёмной темы.
   ============================================================ */

:root {
  /* --- Пергамент / фон --- */
  --u-bg:            #f4ece0;  /* основной фон страницы */
  --u-bg-soft:       #efe6d6;  /* карточки, секции */
  --u-bg-sunken:     #e8dcc8;  /* утопленные блоки, таблицы */
  --u-paper:         #fbf7f0;  /* «бумага» — карточки материалов */

  /* --- Текст --- */
  --u-ink:           #2b2721;  /* основной текст (графит-коричневый) */
  --u-ink-soft:      #5a5146;  /* вторичный текст */
  --u-ink-muted:     #6f6555;  /* подписи, мета (контраст ≥4.5:1 на фоне) */

  /* --- Акценты (из аватара Hooded Indian) --- */
  --u-ochre:         #b06a2c;  /* охра — основной акцент, кнопки, ссылки */
  --u-ochre-deep:    #8f5420;  /* охра тёмная — hover */
  --u-ochre-text:    #8f5420;  /* охра для мелкого текста (≥4.5:1) */
  --u-btn:           #a8632a;  /* фон кнопок под белый текст (≥4.5:1) */
  --u-field:         #ffffff;  /* фон полей ввода */
  --u-red:           #8a2f2a;  /* тёмно-красный — второй акцент, перо */
  --u-graphite:      #332f2a;  /* графит — тёмные элементы */

  /* --- Линии / тени --- */
  --u-line:          #d8c9b0;  /* тонкие разделители */
  --u-line-strong:   #c2ad8c;
  --u-shadow:        0 6px 24px rgba(60, 46, 28, 0.10);
  --u-shadow-soft:   0 2px 10px rgba(60, 46, 28, 0.07);

  /* --- Типографика (кириллические шрифты с засечками) --- */
  --u-font-head: "Lora", "PT Serif", Georgia, "Times New Roman", serif;
  --u-font-body: "PT Serif", "Lora", Georgia, serif;
  --u-font-ui:   "PT Sans", "Segoe UI", system-ui, sans-serif;

  --u-h1: clamp(2.1rem, 4.5vw, 3.4rem);
  --u-h2: clamp(1.6rem, 3vw, 2.3rem);
  --u-h3: clamp(1.25rem, 2vw, 1.6rem);
  --u-measure: 68ch;          /* комфортная ширина текста */

  /* --- Радиусы / отступы --- */
  --u-radius:    10px;
  --u-radius-lg: 16px;
  --u-gap:       clamp(1rem, 2.5vw, 2rem);
  --u-section:   clamp(2.5rem, 6vw, 5rem);
}

/* ============================================================
   Тёмная тема.
   Включается атрибутом data-theme="dark" на <html> (переключатель),
   либо системной настройкой, если переключатель не трогали.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --u-bg:          #1b1813;
    --u-bg-soft:     #221d17;
    --u-bg-sunken:   #15120e;
    --u-paper:       #262019;
    --u-ink:         #ece3d4;
    --u-ink-soft:    #c3b7a3;
    --u-ink-muted:   #9a8e7d;
    --u-ochre:       #d08a4a;
    --u-ochre-deep:  #b06a2c;
    --u-ochre-text:  #d08a4a;
    --u-btn:         #a8632a;
    --u-field:       #2f281f;
    --u-red:         #c0554a;
    --u-graphite:    #0f0d0a;
    --u-line:        #3a3228;
    --u-line-strong: #4d4336;
    --u-shadow:      0 8px 30px rgba(0, 0, 0, 0.45);
    --u-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --u-bg:          #1b1813;
  --u-bg-soft:     #221d17;
  --u-bg-sunken:   #15120e;
  --u-paper:       #262019;
  --u-ink:         #ece3d4;
  --u-ink-soft:    #c3b7a3;
  --u-ink-muted:   #9a8e7d;
  --u-ochre:       #d08a4a;
  --u-ochre-deep:  #b06a2c;
  --u-ochre-text:  #d08a4a;
  --u-btn:         #a8632a;
  --u-field:       #2f281f;
  --u-red:         #c0554a;
  --u-graphite:    #0f0d0a;
  --u-line:        #3a3228;
  --u-line-strong: #4d4336;
  --u-shadow:      0 8px 30px rgba(0, 0, 0, 0.45);
  --u-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
}