/*
 * Скины ЛК. Скин меняет палитру, тема (день / при свечах) выбирает её светлый или тёмный вариант.
 * Атрибут data-skin стоит на <html> (ставит скрипт в <head> по localStorage 'lk-skin'),
 * но токены привязаны к любому элементу с data-skin: так превью в настройках
 * показывает скин, не трогая страницу вокруг. «Классический» живёт в design-system.css.
 */

/* ---------------- Бертрайм: гиппогриф, жёлтый, жёлтая хризантема ---------------- */

/* День: светлое золото герба, коричневое перо гиппогрифа, янтарь хризантемы */
[data-skin="bertraim"]{
  --bg: oklch(0.956 0.038 91.5);
  --surface: oklch(0.984 0.020 93.0);
  --fawn: oklch(0.910 0.066 89.0);
  --line: oklch(0.838 0.082 84.5);
  --accent: oklch(0.530 0.112 66.0);
  --walnut: oklch(0.395 0.072 57.0);
  --ink: oklch(0.252 0.036 58.0);
  --ink-2: oklch(0.465 0.045 68.0);
  --brass: oklch(0.782 0.148 85.5);
  --sage: oklch(0.585 0.070 118.0);
  --terra: oklch(0.548 0.131 33.2);
  --ochre: oklch(0.745 0.152 80.0);
  --slate: oklch(0.575 0.045 240.0);
  --shadow-1: 0 1px 2px oklch(0.40 0.08 70 / .08), 0 2px 6px oklch(0.40 0.08 70 / .07);
  --shadow-2: 0 2px 4px oklch(0.40 0.08 70 / .08), 0 8px 20px oklch(0.40 0.08 70 / .12);
  --shadow-3: 0 4px 8px oklch(0.40 0.08 70 / .10), 0 18px 44px oklch(0.40 0.08 70 / .18);
  --skin-glow: oklch(0.880 0.130 90 / .55);
}

/* При свечах: ночное поле под золотым гербом, акцент светится как лепестки */
[data-theme="candle"][data-skin="bertraim"],
[data-theme="candle"] [data-skin="bertraim"]{
  --bg: oklch(0.205 0.024 68.0);
  --surface: oklch(0.250 0.030 71.0);
  --fawn: oklch(0.312 0.040 74.0);
  --line: oklch(0.385 0.048 76.0);
  --accent: oklch(0.805 0.138 84.0);
  --walnut: oklch(0.885 0.092 90.0);
  --ink: oklch(0.955 0.026 91.0);
  --ink-2: oklch(0.780 0.045 83.0);
  --brass: oklch(0.830 0.150 88.0);
  --sage: oklch(0.730 0.065 120.0);
  --terra: oklch(0.690 0.125 36.0);
  --ochre: oklch(0.835 0.140 86.0);
  --slate: oklch(0.720 0.048 238.0);
  --shadow-1: 0 1px 2px oklch(0.10 0.02 60 / .50);
  --shadow-2: 0 3px 8px oklch(0.10 0.02 60 / .50), 0 10px 28px oklch(0.08 0.02 60 / .55);
  --shadow-3: 0 6px 16px oklch(0.10 0.02 60 / .55), 0 22px 56px oklch(0.07 0.02 60 / .65);
  --skin-glow: oklch(0.560 0.120 82 / .22);
}

/* ---------------- Сайрес: феникс, красный, красная роза ---------------- */
/* Красный здесь приглушён до граната и вина: большие площади почти нейтральные,
   насыщенный цвет только на акцентах. Ошибки (--terra) уведены в оранжевое пламя,
   чтобы не сливаться с акцентом. */

/* День: розоватый пергамент, гранатовый акцент, золото пера феникса */
[data-skin="sayres"]{
  --bg: oklch(0.955 0.016 28.0);
  --surface: oklch(0.984 0.008 30.0);
  --fawn: oklch(0.910 0.030 22.0);
  --line: oklch(0.845 0.042 20.0);
  --accent: oklch(0.500 0.130 20.0);
  --walnut: oklch(0.365 0.092 16.0);
  --ink: oklch(0.250 0.034 18.0);
  --ink-2: oklch(0.465 0.040 22.0);
  --brass: oklch(0.745 0.125 72.0);
  --sage: oklch(0.585 0.055 130.0);
  --terra: oklch(0.590 0.160 42.0);
  --ochre: oklch(0.740 0.140 68.0);
  --slate: oklch(0.575 0.040 250.0);
  --shadow-1: 0 1px 2px oklch(0.35 0.08 20 / .07), 0 2px 6px oklch(0.35 0.08 20 / .06);
  --shadow-2: 0 2px 4px oklch(0.35 0.08 20 / .07), 0 8px 20px oklch(0.35 0.08 20 / .10);
  --shadow-3: 0 4px 8px oklch(0.35 0.08 20 / .09), 0 18px 44px oklch(0.35 0.08 20 / .16);
  --skin-glow: oklch(0.870 0.060 25 / .55);
}

/* При свечах: тёмное вино, акцент как лепесток розы в полумраке, без неона */
[data-theme="candle"][data-skin="sayres"],
[data-theme="candle"] [data-skin="sayres"]{
  --bg: oklch(0.200 0.022 18.0);
  --surface: oklch(0.245 0.028 18.0);
  --fawn: oklch(0.305 0.036 18.0);
  --line: oklch(0.380 0.042 20.0);
  --accent: oklch(0.700 0.120 19.0);
  --walnut: oklch(0.860 0.060 32.0);
  --ink: oklch(0.950 0.014 40.0);
  --ink-2: oklch(0.775 0.032 28.0);
  --brass: oklch(0.800 0.120 76.0);
  --sage: oklch(0.725 0.060 130.0);
  --terra: oklch(0.730 0.140 48.0);
  --ochre: oklch(0.820 0.120 74.0);
  --slate: oklch(0.720 0.045 250.0);
  --shadow-1: 0 1px 2px oklch(0.09 0.02 18 / .50);
  --shadow-2: 0 3px 8px oklch(0.09 0.02 18 / .50), 0 10px 28px oklch(0.07 0.02 18 / .55);
  --shadow-3: 0 6px 16px oklch(0.09 0.02 18 / .55), 0 22px 56px oklch(0.06 0.02 18 / .65);
  --skin-glow: oklch(0.500 0.110 28 / .20);
}

/* ---------------- Магнус: единорог, синий, синяя роза ---------------- */
/* Ночное небо герба, серебро гривы и золото звёзд. Синий уже занят информационным
   --slate, поэтому здесь он уведён в серо-бирюзовый, чтобы не сливаться с акцентом. */

/* День: серебристо-голубой пергамент, королевский синий акцент, золото звёзд */
[data-skin="magnus"]{
  --bg: oklch(0.955 0.013 255.0);
  --surface: oklch(0.985 0.006 255.0);
  --fawn: oklch(0.912 0.024 260.0);
  --line: oklch(0.848 0.034 262.0);
  --accent: oklch(0.470 0.130 264.0);
  --walnut: oklch(0.330 0.090 266.0);
  --ink: oklch(0.240 0.034 265.0);
  --ink-2: oklch(0.460 0.036 260.0);
  --brass: oklch(0.760 0.110 82.0);
  --sage: oklch(0.585 0.050 140.0);
  --terra: oklch(0.550 0.140 30.0);
  --ochre: oklch(0.730 0.120 75.0);
  --slate: oklch(0.570 0.055 205.0);
  --shadow-1: 0 1px 2px oklch(0.30 0.06 265 / .07), 0 2px 6px oklch(0.30 0.06 265 / .06);
  --shadow-2: 0 2px 4px oklch(0.30 0.06 265 / .07), 0 8px 20px oklch(0.30 0.06 265 / .10);
  --shadow-3: 0 4px 8px oklch(0.30 0.06 265 / .09), 0 18px 44px oklch(0.30 0.06 265 / .16);
  --skin-glow: oklch(0.860 0.050 262 / .55);
}

/* При свечах: звёздное небо, акцент мягкий васильковый, серебро на тексте */
[data-theme="candle"][data-skin="magnus"],
[data-theme="candle"] [data-skin="magnus"]{
  --bg: oklch(0.195 0.030 268.0);
  --surface: oklch(0.240 0.036 268.0);
  --fawn: oklch(0.300 0.045 268.0);
  --line: oklch(0.375 0.050 266.0);
  --accent: oklch(0.740 0.105 262.0);
  --walnut: oklch(0.870 0.050 255.0);
  --ink: oklch(0.955 0.010 255.0);
  --ink-2: oklch(0.775 0.030 258.0);
  --brass: oklch(0.820 0.110 84.0);
  --sage: oklch(0.725 0.060 140.0);
  --terra: oklch(0.690 0.130 30.0);
  --ochre: oklch(0.820 0.110 78.0);
  --slate: oklch(0.730 0.060 205.0);
  --shadow-1: 0 1px 2px oklch(0.08 0.03 268 / .50);
  --shadow-2: 0 3px 8px oklch(0.08 0.03 268 / .50), 0 10px 28px oklch(0.06 0.03 268 / .55);
  --shadow-3: 0 6px 16px oklch(0.08 0.03 268 / .55), 0 22px 56px oklch(0.05 0.03 268 / .65);
  --skin-glow: oklch(0.450 0.100 265 / .25);
}

/* ---------------- Травница: сушёные травы, мох, ромашка, лаванда ---------------- */
/* Спокойный зелёный без кислотности: низкая насыщенность на площадях, мох на акцентах.
   Информационный --slate стал лавандовым, ошибки (--terra) цвета шиповника. */

/* День: льняной пергамент с зеленцой, моховой акцент, мёд ромашки на бейджах */
[data-skin="herbalist"]{
  --bg: oklch(0.953 0.018 118.0);
  --surface: oklch(0.984 0.010 115.0);
  --fawn: oklch(0.912 0.032 125.0);
  --line: oklch(0.848 0.042 128.0);
  --accent: oklch(0.480 0.075 150.0);
  --walnut: oklch(0.340 0.055 155.0);
  --ink: oklch(0.250 0.025 150.0);
  --ink-2: oklch(0.460 0.030 140.0);
  --brass: oklch(0.760 0.100 85.0);
  --sage: oklch(0.600 0.090 128.0);
  --terra: oklch(0.550 0.130 25.0);
  --ochre: oklch(0.730 0.110 78.0);
  --slate: oklch(0.580 0.060 295.0);
  --shadow-1: 0 1px 2px oklch(0.30 0.04 150 / .07), 0 2px 6px oklch(0.30 0.04 150 / .06);
  --shadow-2: 0 2px 4px oklch(0.30 0.04 150 / .07), 0 8px 20px oklch(0.30 0.04 150 / .10);
  --shadow-3: 0 4px 8px oklch(0.30 0.04 150 / .09), 0 18px 44px oklch(0.30 0.04 150 / .16);
  --skin-glow: oklch(0.880 0.050 135 / .55);
}

/* При свечах: теплица ночью, мягкий шалфейный акцент, светлый лён на тексте */
[data-theme="candle"][data-skin="herbalist"],
[data-theme="candle"] [data-skin="herbalist"]{
  --bg: oklch(0.200 0.018 150.0);
  --surface: oklch(0.245 0.022 150.0);
  --fawn: oklch(0.305 0.028 148.0);
  --line: oklch(0.380 0.033 145.0);
  --accent: oklch(0.760 0.085 145.0);
  --walnut: oklch(0.870 0.050 120.0);
  --ink: oklch(0.950 0.012 110.0);
  --ink-2: oklch(0.775 0.028 130.0);
  --brass: oklch(0.810 0.100 86.0);
  --sage: oklch(0.740 0.080 130.0);
  --terra: oklch(0.700 0.120 25.0);
  --ochre: oklch(0.820 0.100 80.0);
  --slate: oklch(0.740 0.060 295.0);
  --shadow-1: 0 1px 2px oklch(0.08 0.02 150 / .50);
  --shadow-2: 0 3px 8px oklch(0.08 0.02 150 / .50), 0 10px 28px oklch(0.06 0.02 150 / .55);
  --shadow-3: 0 6px 16px oklch(0.08 0.02 150 / .55), 0 22px 56px oklch(0.05 0.02 150 / .65);
  --skin-glow: oklch(0.450 0.070 145 / .22);
}

/* ---------------- Чародейство: аметист, сумерки, звёздная пыль ---------------- */
/* Фиолетовый приглушён до аметиста и сливы, золото звёздной пыли на бейджах.
   Информационный --slate уведён в морскую синеву, ошибки (--terra) розово-красные,
   чтобы ни то, ни другое не сливалось с фиолетовым акцентом. */

/* День: бледная лаванда, аметистовый акцент, сливовый текст */
[data-skin="arcane"]{
  --bg: oklch(0.955 0.016 300.0);
  --surface: oklch(0.985 0.008 300.0);
  --fawn: oklch(0.912 0.030 302.0);
  --line: oklch(0.848 0.042 302.0);
  --accent: oklch(0.480 0.130 300.0);
  --walnut: oklch(0.340 0.090 305.0);
  --ink: oklch(0.240 0.030 300.0);
  --ink-2: oklch(0.460 0.035 300.0);
  --brass: oklch(0.770 0.110 85.0);
  --sage: oklch(0.590 0.060 140.0);
  --terra: oklch(0.550 0.140 20.0);
  --ochre: oklch(0.740 0.120 78.0);
  --slate: oklch(0.570 0.060 220.0);
  --shadow-1: 0 1px 2px oklch(0.30 0.06 300 / .07), 0 2px 6px oklch(0.30 0.06 300 / .06);
  --shadow-2: 0 2px 4px oklch(0.30 0.06 300 / .07), 0 8px 20px oklch(0.30 0.06 300 / .10);
  --shadow-3: 0 4px 8px oklch(0.30 0.06 300 / .09), 0 18px 44px oklch(0.30 0.06 300 / .16);
  --skin-glow: oklch(0.860 0.060 305 / .55);
}

/* При свечах: сумеречное небо, мягкий сиреневый акцент, звёздное золото */
[data-theme="candle"][data-skin="arcane"],
[data-theme="candle"] [data-skin="arcane"]{
  --bg: oklch(0.195 0.028 298.0);
  --surface: oklch(0.240 0.034 298.0);
  --fawn: oklch(0.300 0.042 298.0);
  --line: oklch(0.375 0.048 298.0);
  --accent: oklch(0.750 0.110 300.0);
  --walnut: oklch(0.870 0.050 310.0);
  --ink: oklch(0.955 0.010 300.0);
  --ink-2: oklch(0.775 0.030 300.0);
  --brass: oklch(0.820 0.110 86.0);
  --sage: oklch(0.730 0.060 140.0);
  --terra: oklch(0.700 0.130 20.0);
  --ochre: oklch(0.820 0.110 80.0);
  --slate: oklch(0.730 0.060 220.0);
  --shadow-1: 0 1px 2px oklch(0.08 0.03 298 / .50);
  --shadow-2: 0 3px 8px oklch(0.08 0.03 298 / .50), 0 10px 28px oklch(0.06 0.03 298 / .55);
  --shadow-3: 0 6px 16px oklch(0.08 0.03 298 / .55), 0 22px 56px oklch(0.05 0.03 298 / .65);
  --skin-glow: oklch(0.450 0.110 302 / .25);
}

/* ---------------- Астролябия (премиум, лавка «У Эйкера», keyword = astrolabe) ---------------- */
/* Обсерватория придворного астролога: индиго ночного неба, латунь приборов, пергамент атласа.
   Боковая панель темнее страницы в обеих темах (ночное небо над башней). Декор (звёздные точки,
   астролябия справа вверху, небо внизу панели) лежит в assets/img/skins/, мерцание и вращение
   только «при свечах» и только без prefers-reduced-motion. Копия токенов панели в leftbox-legacy.css. */

/* День: пергамент звёздного атласа */
[data-skin="astrolabe"]{
  --bg: #F4ECDC;
  --surface: #FBF7EE;
  --fawn: #F0DFC0;
  --line: #D9C59A;
  --accent: #8C6A2A;
  --walnut: #6E5220;
  --ink: #0B1428;
  --ink-2: #4A5B7A;
  --brass: #C9A45C;
  --sage: #5F8A6B;
  --terra: #B4543A;
  --ochre: #B98A34;
  --slate: #4F6E9A;
  --st: rgba(23,42,72,.22);
  --shadow-1: 0 1px 2px rgba(11,20,40,.07), 0 2px 6px rgba(11,20,40,.06);
  --shadow-2: 0 2px 4px rgba(11,20,40,.07), 0 8px 20px rgba(11,20,40,.10);
  --shadow-3: 0 4px 8px rgba(11,20,40,.09), 0 18px 44px rgba(11,20,40,.16);
  --skin-glow: rgba(201,164,92,.28);
  --skin-decor: .12;
  --skin-pattern:
    radial-gradient(1px 1px at 23px 41px, var(--st) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 157px 89px, var(--st) 50%, transparent 52%),
    radial-gradient(1px 1px at 251px 203px, var(--st) 50%, transparent 52%),
    radial-gradient(1px 1px at 88px 270px, var(--st) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 199px 13px, var(--st) 50%, transparent 52%),
    radial-gradient(1px 1px at 300px 150px, var(--st) 50%, transparent 52%);
  /* по размеру на каждый из шести слоёв узора */
  --skin-pattern-size: 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px;
}

/* При свечах: само небо над башней */
[data-theme="candle"][data-skin="astrolabe"],
[data-theme="candle"] [data-skin="astrolabe"]{
  --bg: #0B1428;
  --surface: #101C35;
  --fawn: #172A48;
  --line: #565044;
  --accent: #C9A45C;
  --walnut: #E2C27E;
  --ink: #F0DFC0;
  --ink-2: #8899BB;
  --brass: #C9A45C;
  --sage: #8FB29A;
  --terra: #E08A6E;
  --ochre: #D9B871;
  --slate: #7FB4C9;
  --st: rgba(240,223,192,.55);
  --shadow-1: 0 1px 2px rgba(3,6,14,.55);
  --shadow-2: 0 3px 8px rgba(3,6,14,.55), 0 10px 28px rgba(3,6,14,.6);
  --shadow-3: 0 6px 16px rgba(3,6,14,.6), 0 22px 56px rgba(3,6,14,.7);
  --skin-glow: rgba(113,136,172,.20);
  --skin-decor: .14;
}

/* Боковая панель: индиго с латунной кромкой в обеих темах */
html[data-skin="astrolabe"] .lk-rail{
  --surface: #172A48;
  --bg: #11213C;
  --fawn: #22385C;
  --line: rgba(201,164,92,.30);
  --accent: #C9A45C;
  --walnut: #E2C27E;
  --ink: #F0DFC0;
  --ink-2: #A3B2CF;
  --brass: #D9B871;
  border-right-color: rgba(201,164,92,.45);
}
html[data-skin="astrolabe"] .lk-rail::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 64px; height: 200px; z-index: -1;
  background: url("../img/skins/rail-sky.svg") center bottom / 100% auto no-repeat;
  opacity: .55; pointer-events: none;
}
html[data-skin="astrolabe"] body[data-rail="collapsed"] .lk-rail::after,
body[data-rail="collapsed"] .lk-rail::after{display: none}
html[data-skin="astrolabe"] .lk-nav__item.is-active{
  color: #0B1428;
  box-shadow: 0 0 0 1px rgba(226,194,126,.5), 0 0 14px rgba(201,164,92,.25);
}
html[data-skin="astrolabe"] .lk-mark{color: #0B1428}

/* Астролябия за контентом: правый верхний угол страницы */
html[data-skin="astrolabe"] .lk-main{position: relative; isolation: isolate; overflow-x: clip}
html[data-skin="astrolabe"] .lk-main::before{
  content: "";
  position: absolute; top: 48px; right: -140px; width: 560px; height: 560px; z-index: -1;
  background: url("../img/skins/astrolabe.svg") center / contain no-repeat;
  opacity: var(--skin-decor, .12); pointer-events: none;
}
html[data-skin="astrolabe"] .lk-shell{position: relative; isolation: isolate}

/* Мерцание звёзд, блеск знаков и вращение сетки: только «при свечах» */
@media (prefers-reduced-motion: no-preference){
  @keyframes lk-astro-twinkle{0%,100%{opacity:.12} 50%{opacity:.95}}
  @keyframes lk-astro-glint{0%,100%{filter:none} 50%{filter:drop-shadow(0 0 6px rgba(226,194,126,.8))}}
  @keyframes lk-astro-rete{to{transform:rotate(360deg)}}
  html[data-theme="candle"][data-skin="astrolabe"] .lk-shell::before,
  html[data-theme="candle"][data-skin="astrolabe"] .lk-shell::after{
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      radial-gradient(1.6px 1.6px at 61px 97px, #F0DFC0 50%, transparent 55%),
      radial-gradient(1.3px 1.3px at 311px 37px, #E2C27E 50%, transparent 55%),
      radial-gradient(1.8px 1.8px at 402px 281px, #F0DFC0 50%, transparent 55%),
      radial-gradient(1.2px 1.2px at 170px 340px, #C9A45C 50%, transparent 55%);
    background-size: 470px 410px;
    animation: lk-astro-twinkle 5.5s ease-in-out infinite;
  }
  html[data-theme="candle"][data-skin="astrolabe"] .lk-shell::after{
    background-position: 213px 157px;
    animation: lk-astro-twinkle 7s ease-in-out -2.7s infinite;
  }
  html[data-theme="candle"][data-skin="astrolabe"] .lk-main::before{animation: lk-astro-rete 240s linear infinite}
  html[data-theme="candle"][data-skin="astrolabe"] .lk-mark{animation: lk-astro-glint 4.5s ease-in-out infinite}
}

/* Превью в «Настройки → Внешний вид» */
.st-skin__pic[data-skin="astrolabe"]{
  background-image: radial-gradient(1px 1px at 12px 9px, var(--st) 50%, transparent 55%), radial-gradient(1px 1px at 41px 27px, var(--st) 50%, transparent 55%), radial-gradient(1px 1px at 27px 44px, var(--st) 50%, transparent 55%);
  background-size: 52px 52px;
}
.st-skin__pic[data-skin="astrolabe"] .st-skin__rail{background: #172A48; border-right-color: rgba(201,164,92,.5)}
.st-skin__pic[data-skin="astrolabe"] .st-skin__rail i{background: #22385C}
.st-skin__pic[data-skin="astrolabe"] .st-skin__rail i:first-child{background: #C9A45C}

/* ---------------- Общее для скинов ---------------- */

/* Мягкое сияние в углах, как свет за гербом. Цвет задаёт --skin-glow скина.
   Фон страницы и оболочки ЛК (.lk-shell закрашивает body). */
html[data-skin]:not([data-skin="classic"]) body,
html[data-skin]:not([data-skin="classic"]) .lk-shell{
  background-image:
    var(--skin-pattern, none),
    radial-gradient(1100px 620px at 100% -8%, var(--skin-glow, transparent), transparent 62%),
    radial-gradient(700px 480px at -6% 108%, color-mix(in oklab, var(--skin-glow, transparent) 55%, transparent), transparent 60%);
  background-size: var(--skin-pattern-size, auto), auto, auto;
  background-attachment: fixed;
}