/* brand.css — ПАЛИТРА домашнего стиля AIZED (villka.com, одобрен владельцем 24.08.2026).
   СОБИРАЕТСЯ СКРИПТОМ brand_palette.py из originals/ — правки руками тут умрут
   при следующей сборке. Только переменные: классы красит наш style.css.
   Подключать ПЕРВЫМ, до style.css.

   ⚠️ ШРИФТ У СЕБЯ, а не @import с fonts.googleapis.com. Домашний файл тянет его
   снаружи — для villka это сошло, для магазина, который смотрят из России, нет:
   внешний шрифт отваливается МОЛЧА, и страница садится на системную засечку,
   то есть теряет ровно тот признак, ради которого её и одевали. Три подмножества
   (кириллица · латиница · латиница-расширенная — в ней живёт знак ₽), 81 КБ,
   грузятся только те, что нужны странице. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
 src:url(/assets/fonts/playfair-cyrillic.woff2) format('woff2');
 unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
 src:url(/assets/fonts/playfair-latin-ext.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
 U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
 src:url(/assets/fonts/playfair-latin.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
 U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --brand-bg: linear-gradient(135deg, hsl(274 3% 73%), hsl(243 4% 95%) 46%, hsl(261 3% 82%));   /* заливка фона */
  --brand-bg-solid: hsl(243 4% 95%);   /* дописано нами: плотный фон-земля для родных виджетов браузера */
  --brand-surface-solid: color-mix(in srgb, var(--brand-ink) 5%, var(--brand-bg-solid));   /* дописано нами: плотная поверхность карточки — тот же подмес 5 %, каким карточки красит страница, но без прозрачности */
  --brand-link-fill: var(--brand-link);   /* дописано нами: цвет ссылки под заливку кнопки */
  --brand-texture: repeating-radial-gradient(circle at 4.4% 6%, hsl(220 5% 22% / 0.0685) 0 1px, transparent 1px 41.6px);   /* узор поверх заливки */
  --brand-texture-size: auto;   /* шаг узора */
  --brand-texture-pos: 0 0;   /* сдвиг узора */
  --brand-texture-repeat: no-repeat;   /* повторять ли узор */
  --brand-ink: hsl(210 17% 13%);   /* основной текст */
  --brand-muted: hsl(212 10% 39%);   /* приглушённый текст */
  --brand-accent: hsl(45 63% 35%);   /* акцент: кнопки, выделение */
  --brand-accent-ink: hsl(45 28% 96%);   /* текст на акценте */
  --brand-ok: hsl(152 70% 25%);   /* получилось, сохранено */
  --brand-bad: hsl(0 48% 40%);   /* ошибка, стоп */
  --brand-link: hsl(211 85% 40%);   /* ссылки в тексте */
  --brand-line: hsl(215 6% 75%);   /* линии, рамки, разделители */
  --brand-display: "Playfair Display","Iowan Old Style",Georgia,serif;   /* шрифт заголовков */
  --brand-body: Georgia,"Times New Roman",serif;   /* шрифт текста */
  --brand-radius: 8px;   /* скругление */
  --brand-heading: 2.25rem;   /* кегль главного заголовка */
  --brand-leading: 1.5;   /* межстрочный интервал */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-bg: linear-gradient(135deg, hsl(243 9% 12%), hsl(237 9% 7%) 46%, hsl(243 9% 10%));   /* заливка фона */
    --brand-bg-solid: hsl(237 9% 7%);   /* дописано нами: плотный фон-земля для родных виджетов браузера */
    --brand-surface-solid: color-mix(in srgb, var(--brand-ink) 5%, var(--brand-bg-solid));   /* дописано нами: плотная поверхность карточки — тот же подмес 5 %, каким карточки красит страница, но без прозрачности */
    --brand-link-fill: color-mix(in srgb, var(--brand-link) 62%, #000);   /* дописано нами: цвет ссылки под заливку кнопки */
    --brand-texture: repeating-radial-gradient(circle at 4% 6%, hsl(237 21% 76% / 0.0361) 0 1px, transparent 1px 41.6px);   /* узор поверх заливки */
    --brand-texture-size: auto;   /* шаг узора */
    --brand-texture-pos: 0 0;   /* сдвиг узора */
    --brand-texture-repeat: no-repeat;   /* повторять ли узор */
    --brand-ink: hsl(210 17% 82%);   /* основной текст */
    --brand-muted: hsl(212 10% 52%);   /* приглушённый текст */
    --brand-accent: hsl(45 63% 36%);   /* акцент: кнопки, выделение */
    --brand-accent-ink: hsl(45 28% 96%);   /* текст на акценте */
    --brand-ok: hsl(152 70% 35%);   /* получилось, сохранено */
    --brand-bad: hsl(0 48% 55%);   /* ошибка, стоп */
    --brand-link: hsl(210 59% 58%);   /* ссылки в тексте */
    --brand-line: hsl(215 6% 38%);   /* линии, рамки, разделители */
    --brand-display: "Playfair Display","Iowan Old Style",Georgia,serif;   /* шрифт заголовков */
    --brand-body: Georgia,"Times New Roman",serif;   /* шрифт текста */
    --brand-radius: 8px;   /* скругление */
    --brand-heading: 2.25rem;   /* кегль главного заголовка */
    --brand-leading: 1.5;   /* межстрочный интервал */
  }

  :root:not([data-theme="light"]) .btn-primary {
    color: hsl(210 17% 82%);
    transform: scale(1) scale(1);
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms cubic-bezier(.34,1.56,.64,1), background-color 200ms cubic-bezier(.34,1.56,.64,1), color 200ms cubic-bezier(.34,1.56,.64,1);
  }
  :root:not([data-theme="light"]) .btn-primary:hover {
    transform: scale(1.060);
  }
  :root:not([data-theme="light"]) .btn-primary:active {
    transform: scale(1.060) scale(0.900);
  }
  :root:not([data-theme="light"]) .btn-primary.is-on,
  :root:not([data-theme="light"]) .btn-primary[aria-pressed="true"],
  :root:not([data-theme="light"]) .btn-primary[aria-current] {
    background-color: hsl(45 63% 36%);
    color: hsl(0 0% 98%);
  }
  :root:not([data-theme="light"]) .btn-primary:focus-visible {
    outline: 3px solid hsl(45 63% 36%);
    outline-offset: 2px;
  }
  :root:not([data-theme="light"]) .btn-secondary {
    color: hsl(237 9% 72%);
    transform: scale(1) scale(1);
    box-shadow: inset 0 0 0 0 hsl(45 63% 36%);
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms cubic-bezier(.34,1.56,.64,1), background-color 200ms cubic-bezier(.34,1.56,.64,1), color 200ms cubic-bezier(.34,1.56,.64,1);
  }
  :root:not([data-theme="light"]) .btn-secondary:hover {
    transform: scale(1.060);
    box-shadow: inset 0 0 0 1px hsl(45 63% 36%);
  }
  :root:not([data-theme="light"]) .btn-secondary:active {
    transform: scale(1.060) scale(0.900);
    box-shadow: inset 0 0 0 1px hsl(45 63% 36%);
  }
  :root:not([data-theme="light"]) .btn-secondary.is-on,
  :root:not([data-theme="light"]) .btn-secondary[aria-pressed="true"],
  :root:not([data-theme="light"]) .btn-secondary[aria-current] {
    background-color: hsl(45 63% 36%);
    color: hsl(0 0% 98%);
  }
  :root:not([data-theme="light"]) .btn-secondary:focus-visible {
    outline: 3px solid hsl(45 63% 36%);
    outline-offset: 2px;
  }
  :root:not([data-theme="light"]) .btn-ghost {
    color: hsl(210 17% 82%);
    transform: scale(1) scale(1);
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms cubic-bezier(.34,1.56,.64,1), background-color 200ms cubic-bezier(.34,1.56,.64,1), color 200ms cubic-bezier(.34,1.56,.64,1);
  }
  :root:not([data-theme="light"]) .btn-ghost:hover {
    transform: scale(1.060);
  }
  :root:not([data-theme="light"]) .btn-ghost:active {
    transform: scale(1.060) scale(0.900);
  }
  :root:not([data-theme="light"]) .btn-ghost.is-on,
  :root:not([data-theme="light"]) .btn-ghost[aria-pressed="true"],
  :root:not([data-theme="light"]) .btn-ghost[aria-current] {
    background-color: hsl(45 63% 36%);
    color: hsl(0 0% 98%);
  }
  :root:not([data-theme="light"]) .btn-ghost:focus-visible {
    outline: 3px solid hsl(45 63% 36%);
    outline-offset: 2px;
  }
  :root:not([data-theme="light"]) .link {
    color: hsl(210 59% 58%);
    transform: scale(1) scale(1);
    box-shadow: inset 0 0 0 0 hsl(45 63% 36%);
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms cubic-bezier(.34,1.56,.64,1), background-color 200ms cubic-bezier(.34,1.56,.64,1), color 200ms cubic-bezier(.34,1.56,.64,1);
  }
  :root:not([data-theme="light"]) .link:hover {
    transform: scale(1.060);
    box-shadow: inset 0 0 0 1px hsl(45 63% 36%);
  }
  :root:not([data-theme="light"]) .link:active {
    transform: scale(1.060) scale(0.900);
    box-shadow: inset 0 0 0 1px hsl(45 63% 36%);
  }
  :root:not([data-theme="light"]) .link.is-on,
  :root:not([data-theme="light"]) .link[aria-pressed="true"],
  :root:not([data-theme="light"]) .link[aria-current] {
    background-color: hsl(45 63% 36%);
    color: hsl(0 0% 98%);
  }
  :root:not([data-theme="light"]) .link:focus-visible {
    outline: 3px solid hsl(45 63% 36%);
    outline-offset: 2px;
  }
  :root:not([data-theme="light"]) .input {
    color: hsl(212 10% 52%);
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms cubic-bezier(.34,1.56,.64,1), background-color 200ms cubic-bezier(.34,1.56,.64,1), color 200ms cubic-bezier(.34,1.56,.64,1);
  }
  :root:not([data-theme="light"]) .input.is-on,
  :root:not([data-theme="light"]) .input[aria-pressed="true"],
  :root:not([data-theme="light"]) .input[aria-current] {
    background-color: hsl(45 63% 36%);
    color: hsl(0 0% 98%);
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .btn-secondary, :root:not([data-theme="light"]) .btn-ghost, :root:not([data-theme="light"]) .link, :root:not([data-theme="light"]) .input { transition: none; }
    :root:not([data-theme="light"]) .btn-primary:hover, :root:not([data-theme="light"]) .btn-primary:active, :root:not([data-theme="light"]) .btn-secondary:hover, :root:not([data-theme="light"]) .btn-secondary:active, :root:not([data-theme="light"]) .btn-ghost:hover, :root:not([data-theme="light"]) .btn-ghost:active, :root:not([data-theme="light"]) .link:hover, :root:not([data-theme="light"]) .link:active, :root:not([data-theme="light"]) .input:hover, :root:not([data-theme="light"]) .input:active { transform: none; }
  }
}

:root[data-theme="dark"] {
  --brand-bg: linear-gradient(135deg, hsl(243 9% 12%), hsl(237 9% 7%) 46%, hsl(243 9% 10%));   /* заливка фона */
  --brand-bg-solid: hsl(237 9% 7%);   /* дописано нами: плотный фон-земля для родных виджетов браузера */
  --brand-surface-solid: color-mix(in srgb, var(--brand-ink) 5%, var(--brand-bg-solid));   /* дописано нами: плотная поверхность карточки — тот же подмес 5 %, каким карточки красит страница, но без прозрачности */
  --brand-link-fill: color-mix(in srgb, var(--brand-link) 62%, #000);   /* дописано нами: цвет ссылки под заливку кнопки */
  --brand-texture: repeating-radial-gradient(circle at 4% 6%, hsl(237 21% 76% / 0.0361) 0 1px, transparent 1px 41.6px);   /* узор поверх заливки */
  --brand-texture-size: auto;   /* шаг узора */
  --brand-texture-pos: 0 0;   /* сдвиг узора */
  --brand-texture-repeat: no-repeat;   /* повторять ли узор */
  --brand-ink: hsl(210 17% 82%);   /* основной текст */
  --brand-muted: hsl(212 10% 52%);   /* приглушённый текст */
  --brand-accent: hsl(45 63% 36%);   /* акцент: кнопки, выделение */
  --brand-accent-ink: hsl(45 28% 96%);   /* текст на акценте */
  --brand-ok: hsl(152 70% 35%);   /* получилось, сохранено */
  --brand-bad: hsl(0 48% 55%);   /* ошибка, стоп */
  --brand-link: hsl(210 59% 58%);   /* ссылки в тексте */
  --brand-line: hsl(215 6% 38%);   /* линии, рамки, разделители */
  --brand-display: "Playfair Display","Iowan Old Style",Georgia,serif;   /* шрифт заголовков */
  --brand-body: Georgia,"Times New Roman",serif;   /* шрифт текста */
  --brand-radius: 8px;   /* скругление */
  --brand-heading: 2.25rem;   /* кегль главного заголовка */
  --brand-leading: 1.5;   /* межстрочный интервал */
}