/*
 * Krugozor — warm-tone + sharp-corner overrides over Pico.css v2.
 *
 * Подкрашивает дефолтные холодно-нейтральные цвета Pico в тёплый «бумажный»
 * (light) и «свечной» (dark) спектр. Также убирает border-radius у блоков
 * и форм для более «типографического» / печатного вида.
 *
 * Чтобы откатиться к дефолтному Pico — убрать <link> на этот файл из
 * templates/storefront/base.html (после пико-CDN). Дефолтные значения
 * сохранены в комментариях рядом с каждым override'ом для быстрой сверки.
 */

/* === Geometry ===
 *
 * Контраст: интерактивные элементы (кнопки, формы, пилюли-ссылки) — острые
 * углы, контентные блоки (article) — мягкие 4px. Создаёт визуальное различие
 * между «инструментами» и «содержанием».
 */
:root {
  --pico-border-radius: 0;  /* default: 0.25rem. Применяется к Pico-элементам
                               (input/select/textarea, button, и т. д.).
                               Карточки .book-card (article) переопределены
                               ниже — у них свой 4px. */
}

article {
  border-radius: 8px;  /* default Pico: 0.25rem ≈ 4px. Чуть больше дефолтного,
                          чтобы контраст с острыми кнопками/формами был заметнее */
}

/* === Light theme === */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  /* Логотип в шапке — собственный цвет, чтобы контрастировать с чёрным текстом
     и работать как акцент. Стартовое значение = primary-hover. */
  --krugozor-logo-color:          #800000;  /* среднее между --pico-primary (#660000) и --pico-primary-hover (#990000) */
  --pico-background-color:        #f9f6e0;  /* default: #fff. Кремовый бумажный */
  --pico-color:                   #000000;  /* default: #373c44. Чистый чёрный для максимальной читаемости */
  --pico-muted-color:             #1a120a;  /* default: #646b79. Очень тёмный, едва тёплый */
  /* Pico по умолчанию делает заголовки светлее основного текста (h3 = #424751
     серый!). Привязываем все уровни к --pico-color для единого тёмного тона. */
  --pico-h1-color:                #000000;
  --pico-h2-color:                #000000;
  --pico-h3-color:                #000000;
  --pico-h4-color:                #000000;
  --pico-h5-color:                #000000;
  --pico-h6-color:                #000000;
  --pico-muted-border-color:      #e8dfd2;  /* default: #e7eaf0        */
  --pico-card-background-color:   #fffbed;  /* default: #fff. Заметно светлее страницы (#f9f6e0), но сохраняет тёплый кремовый оттенок */
  --pico-card-border-color:       #e8dfd2;  /* default: #e7eaf0        */
  --pico-primary:                 #660000;  /* default: #0172ad. Глубокий тёмный красный */
  --pico-primary-background:      #660000;
  --pico-primary-border:          #660000;
  --pico-primary-hover:           #990000;  /* default: #015887. Светлее primary — hover «оживляет» цвет */
  --pico-primary-hover-background:#990000;
  --pico-primary-focus:           rgba(102, 0, 0, 0.5);
  --pico-primary-underline:       rgba(102, 0, 0, 0.5);  /* default: rgba(1, 114, 173, 0.5). Подчёркивание ссылок в тон primary */
  --pico-primary-hover-underline: rgba(153, 0, 0, 0.5);
  --pico-primary-inverse:         #fcf8e6;  /* default: #fff. В тон новой кремово-жёлтой странице */
  --pico-secondary:               #1a120a;  /* default: #5d6b89. В тон новому muted-text */
  --pico-secondary-background:    #1a120a;
  --pico-secondary-border:        #1a120a;
  --pico-secondary-hover:         #0d0905;
  --pico-secondary-inverse:       #fcf8e6;
  --pico-form-element-background-color:        #fcf8e6;
  --pico-form-element-border-color:            #d8cfc0;
  --pico-form-element-focus-color:             rgba(153, 89, 58, 0.4);
  /* Placeholder бледный — между bg и border. User-text использует
     --pico-color (чёрный), на ::placeholder не влияет. */
  --pico-form-element-placeholder-color:       #c9bea8;
}

/* === Dark theme === */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --krugozor-logo-color:          var(--pico-primary);  /* в dark — primary (тёплый янтарь) */
    --pico-background-color:        #100d08;  /* default: #13171f. Был #1a1610, темнее для контраста с карточками */
    --pico-color:                   #e8ddc8;  /* default: #c2c7d0       */
    --pico-muted-color:             #9a8c75;  /* default: #7b8495       */
    --pico-muted-border-color:      #2a2218;  /* default: #202632       */
    --pico-card-background-color:   #221d15;  /* default: #181c25. Был #211c14, чуть светлее для контраста с фоном */
    --pico-card-border-color:       #2a2218;  /* default: #202632       */
    /* В тёмной теме все заголовки в тон --pico-color, чтобы не протекали
       чёрные значения из light-блока (специфичность одинаковая). */
    --pico-h1-color:                #e8ddc8;
    --pico-h2-color:                #e8ddc8;
    --pico-h3-color:                #e8ddc8;
    --pico-h4-color:                #e8ddc8;
    --pico-h5-color:                #e8ddc8;
    --pico-h6-color:                #e8ddc8;
    --pico-primary:                 #d49a5e;  /* default: #01aaff       */
    --pico-primary-background:      #d49a5e;
    --pico-primary-border:          #d49a5e;
    --pico-primary-hover:           #e1ad75;  /* default: #79c0ff       */
    --pico-primary-hover-background:#e1ad75;
    --pico-primary-focus:           rgba(212, 154, 94, 0.4);
    --pico-primary-underline:       rgba(212, 154, 94, 0.5);
    --pico-primary-hover-underline: rgba(225, 173, 117, 0.5);
    --pico-primary-inverse:         #100d08;  /* default: #fff          */
    --pico-secondary:               #b8a98c;
    --pico-secondary-background:    #b8a98c;
    --pico-secondary-border:        #b8a98c;
    --pico-secondary-hover:         #c8baa0;
    --pico-secondary-inverse:       #100d08;
    --pico-form-element-background-color:        #221d15;
    --pico-form-element-border-color:            #3a2f23;
    --pico-form-element-focus-color:             rgba(212, 154, 94, 0.4);
    /* Placeholder тёмный — чуть светлее border, чтобы был еле различим
       на bg формы. User-text использует --pico-color (#e8ddc8). */
    --pico-form-element-placeholder-color:       #4a3d2c;
  }
}

[data-theme="dark"] {
  --krugozor-logo-color:          var(--pico-primary);
  --pico-background-color:        #100d08;
  --pico-color:                   #e8ddc8;
  --pico-muted-color:             #9a8c75;
  --pico-muted-border-color:      #2a2218;
  --pico-card-background-color:   #221d15;
  --pico-card-border-color:       #2a2218;
  --pico-h1-color:                #e8ddc8;
  --pico-h2-color:                #e8ddc8;
  --pico-h3-color:                #e8ddc8;
  --pico-h4-color:                #e8ddc8;
  --pico-h5-color:                #e8ddc8;
  --pico-h6-color:                #e8ddc8;
  --pico-primary:                 #d49a5e;
  --pico-primary-background:      #d49a5e;
  --pico-primary-border:          #d49a5e;
  --pico-primary-hover:           #e1ad75;
  --pico-primary-hover-background:#e1ad75;
  --pico-primary-focus:           rgba(212, 154, 94, 0.4);
  --pico-primary-underline:       rgba(212, 154, 94, 0.5);
  --pico-primary-hover-underline: rgba(225, 173, 117, 0.5);
  --pico-primary-inverse:         #100d08;
  --pico-secondary:               #b8a98c;
  --pico-secondary-background:    #b8a98c;
  --pico-secondary-border:        #b8a98c;
  --pico-secondary-hover:         #c8baa0;
  --pico-secondary-inverse:       #100d08;
  --pico-form-element-background-color:        #221d15;
  --pico-form-element-border-color:            #3a2f23;
  --pico-form-element-focus-color:             rgba(212, 154, 94, 0.4);
  --pico-form-element-placeholder-color:       #4a3d2c;
}

/* === Storefront alerts (success / error) ===
 * Используются на странице оформленного заказа: «Заказ оплачен», «Оплата не прошла».
 * Цвета через переменные, чтобы плашка читалась и в светлой, и в тёмной теме.
 */
:root {
  --krugozor-alert-success-bg:     #d4edda;
  --krugozor-alert-success-border: #c3e6cb;
  --krugozor-alert-success-color:  #155724;
  --krugozor-alert-warning-bg:     #fff3cd;
  --krugozor-alert-warning-border: #ffeeba;
  --krugozor-alert-warning-color:  #856404;
  --krugozor-alert-error-bg:       #f8d7da;
  --krugozor-alert-error-border:   #f5c6cb;
  --krugozor-alert-error-color:    #721c24;
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --krugozor-alert-success-bg:     #1f3a25;
    --krugozor-alert-success-border: #2f5a37;
    --krugozor-alert-success-color:  #c8e6c9;
    --krugozor-alert-warning-bg:     #3a2f15;
    --krugozor-alert-warning-border: #5a4720;
    --krugozor-alert-warning-color:  #f0d77a;
    --krugozor-alert-error-bg:       #3a1d20;
    --krugozor-alert-error-border:   #5a2d33;
    --krugozor-alert-error-color:    #f5c6cb;
  }
}
[data-theme="dark"] {
  --krugozor-alert-success-bg:     #1f3a25;
  --krugozor-alert-success-border: #2f5a37;
  --krugozor-alert-success-color:  #c8e6c9;
  --krugozor-alert-warning-bg:     #3a2f15;
  --krugozor-alert-warning-border: #5a4720;
  --krugozor-alert-warning-color:  #f0d77a;
  --krugozor-alert-error-bg:       #3a1d20;
  --krugozor-alert-error-border:   #5a2d33;
  --krugozor-alert-error-color:    #f5c6cb;
}
.krugozor-alert {
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  border: 1px solid transparent;
}
.krugozor-alert-success {
  background: var(--krugozor-alert-success-bg);
  border-color: var(--krugozor-alert-success-border);
  color: var(--krugozor-alert-success-color);
}
.krugozor-alert-warning {
  background: var(--krugozor-alert-warning-bg);
  border-color: var(--krugozor-alert-warning-border);
  color: var(--krugozor-alert-warning-color);
}
.krugozor-alert-error {
  background: var(--krugozor-alert-error-bg);
  border-color: var(--krugozor-alert-error-border);
  color: var(--krugozor-alert-error-color);
}


/* === Skip-link для клавиатурных пользователей ===
 * Не виден до фокуса; при Tab появляется в левом верхнем углу. WCAG 2.4.1.
 */
/* Стандартный «visually-hidden» паттерн вместо top:-40px — не зависит
   от того, на сколько строк перенесётся текст ссылки на узком экране. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 16px;
  clip: auto;
  overflow: visible;
  z-index: 1000;
  background: var(--pico-primary, #2a7ae2);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  outline: 2px solid white;
  outline-offset: 2px;
}