/* FROZEN — фирменная система шаблона.
   Здесь только токены, и все до одного перекрываются палитрой магазина из
   brands/<магазин>/brand.json. Компоненты — в app.css. */

:root{
  color-scheme:dark;
  /* ── порода: от глубины забоя к освещённому камню ────────────────── */
  --deep:#0b0907;          /* глубина шахты, фон страницы */
  --rock:#12100c;          /* порода, секции */
  --stone:#1a1611;         /* камень, карточки */
  --stone-2:#221d16;       /* камень под светом, наведение */
  --seam:#2b241b;          /* прожилка, границы */
  --seam-2:#3a3125;        /* прожилка ярче */

  /* ── свет лампы: главный акцент ──────────────────────────────────── */
  --lamp:#e8b55c;          /* пламя лампы */
  --lamp-hi:#f5cf8a;       /* блик */
  --lamp-lo:#a97c33;       /* тень пламени */

  /* Жар от углей: свет, который поднимается снизу под шапку. Это не
     поверхность и не блик на металле, а ИСТОЧНИК — потому у него свой токен,
     а не оттенок акцента. Числом его выразить было нельзя: у оранжевого
     красный канал 255, а у самого светлого золота палитры 247, так что ни
     один токен и ни одна их смесь до него не дотягивалась, и двенадцать мест
     в стилях оставались вписанными вручную. Из-за них розовая и сиреневая
     витрины отдавали чужим оранжевым. */
  --zhar:#ff8c34;          /* жар углей */
  --zhar-lo:#e87c28;       /* тот же жар глубже */

  --lamp-top:#f7d89b;      /* верх золотого ската */
  --lamp-mid:#d9a441;      /* складка на металле */
  --on-lamp:#3b2807;       /* чернила поверх акцента */
  /* Одна строка на все золотые поверхности. Раньше этот же градиент стоял
     числом в одиннадцати местах, и сменить акцент магазина было невозможно
     без правки стилей — ровно то, чего шаблон не должен требовать. */
  --metal:linear-gradient(140deg,#f7d89b 0%,#f5cf8a 46%,#d9a441 47%,#e8b55c 100%);
  --stone-deep:#15120e;    /* дно карточных заливок */
  --ore-hi:#cfe6a8;        /* удача, светлый край */
  --on-ore:#05261a;        /* чернила поверх удачи */
  --on-rust:#2b0b04;       /* чернила поверх сбоя */

  /* ── камень и песок: текст и второстепенное ──────────────────────── */
  --cream:#f2ece0;         /* основной текст */
  --sand:#c3b394;          /* второстепенный текст */
  --sand-dim:#8b7f6a;      /* подписи */
  --moss:#6b6a4e;          /* оливковый, гузлик */

  /* ── состояния ───────────────────────────────────────────────────── */
  --ore:#7fd6a0;           /* удача, выдано */
  --rust:#d97757;          /* сбой */

  /* ── скругления: камень окатанный, без острых углов ──────────────── */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;

  /* ── движение ────────────────────────────────────────────────────── */
  /* Встроенные кривые слабые. Эти — с характером: выход быстрый,
     чтобы интерфейс отвечал сразу, а не раздумывал. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:130ms;         /* отклик на нажатие */
  --t-hover:180ms;
  --t-panel:260ms;

  /* ── типографика ─────────────────────────────────────────────────── */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Заголовочный шрифт: вывеска, заголовки экранов, крупные числа. Магазин
     может заказать ПАРУ гарнитур — одна держит интерфейс, вторая заголовки,
     и это главное, что отличает набранное дизайнером от набранного по
     умолчанию. Обе приезжают ОДНИМ адресом: css2 у гугла принимает несколько
     family в одном запросе, лишнего похода в сеть не появляется.
     Здесь он РАВЕН основному: магазин, который пары не заказывал, выглядит
     ровно как прежде, поэтому правило живёт в общем шаблоне. */
  --font-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Фон — забой. Снимок лежит ОТДЕЛЬНЫМ фиксированным слоем под контентом:
   background-attachment:fixed заставляет браузер перерисовывать фон на каждом
   кадре прокрутки, а фиксированный слой рисуется один раз.

   Поверх снимка — плотная завеса. Фотография в шахте красивая, но читать
   поверх неё цены невозможно: её задача создать глубину, а не соперничать
   с товаром. Сверху завеса тоньше — там, где в кадре падает свет. */
body{background:var(--deep)}
body.nophoto::before,body.nophoto::after{display:none}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("img/mine.jpg?v=8b257bf2") 50% 42% / cover no-repeat;
  /* Снимок сам по себе тёмный (средняя яркость 34 из 255). Сквозь стекло
     такое не читается вовсе, поэтому подсвечиваем его здесь, а не осветляем
     всю страницу: текст сидит на карточках, у них свой тёмный слой. */
  opacity:1;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  /* Затемнение держим лёгким: карточки теперь стеклянные, и шахта обязана
     быть видна СКВОЗЬ них. При прежних .82–.96 внизу за стеклом была
     чернота, и вся прозрачность пропадала впустую. Читаемость текста берёт
     на себя сама карточка — у неё есть собственный тёмный слой. */
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--deep) 16%, transparent) 0%, color-mix(in oklab, var(--deep) 26%, transparent) 30%,
                    color-mix(in oklab, var(--deep) 36%, transparent) 64%, color-mix(in oklab, var(--deep) 42%, transparent) 100%),
    radial-gradient(126% 88% at 52% 30%, transparent 44%, color-mix(in oklab, var(--deep) 30%, transparent) 100%);
}
@media (max-width:900px){
  body::before{background-image:url("img/mine-sm.jpg?v=c88117df")}
}
/* Фон не должен мигать при смене темы или мешать тем, кто просил тише */
@media (prefers-reduced-transparency:reduce){
  body::before{opacity:.4}
}