/* Все магические числа проекта живут здесь и больше нигде. */

:root {
  color-scheme: dark;

  /* ── Экран ──────────────────────────────────────────────── */
  /* Квадрат 1:1, как у Rabbit R1 по компоновке. Панель ещё не выбрана —
     если возьмёшь 480×640, меняется только высота. */
  --screen-w: 480px;
  --screen-h: 480px;
  --status-h: 40px;

  /* ── Цвет ───────────────────────────────────────────────── */
  --bg:          #0B0B0F;
  --surface:     rgba(255, 255, 255, .055);
  --surface-hi:  rgba(255, 255, 255, .10);
  --line:        rgba(255, 255, 255, .08);
  --text:        #F4F4F5;
  --text-dim:    rgba(244, 244, 245, .52);
  --text-faint:  rgba(244, 244, 245, .30);

  /* Экран загрузки — вариант C: чёрный со свечением за логотипом. */
  --boot-bg:   #0B0B0F;
  --boot-glow: radial-gradient(58% 34% at 50% 47%, rgba(255, 255, 255, .14), transparent 70%);

  /* ── Ритм ───────────────────────────────────────────────── */
  --pad: 20px;
  --gap: 16px;
  /* Плитка 76 px при радиусе 28 — это 37% от стороны, заметно круглее
     iOS-овских 22%. Ближе к Material и к общему тону оболочки. */
  --radius-tile: 28px;
  --radius-card: 22px;
  --radius-screen: 32px;
  /* Скругление «в полную», для полос и капсул. */
  --radius-pill: 999px;

  /* Минимальная тач-цель. Ничего нажимаемого меньше этого размера. */
  --touch: 48px;

  /* Маска свечения ассистента: размытая скруглённая рамка. Лежит здесь,
     потому что подбирается на глаз вместе с остальной геометрией. */
  --assistant-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='3.6'/%3E%3C/filter%3E%3Crect x='3' y='3' width='94' height='94' rx='22' fill='none' stroke='%23fff' stroke-width='9' filter='url(%23b)'/%3E%3C/svg%3E");

  --indicator-w: 140px;
  --indicator-h: 5px;

  /* ── Стекло ─────────────────────────────────────────────────────────────
     По умолчанию всё выключено: плоский вид — безопасная база, которая
     заведомо работает на любом железе. Стекло включается атрибутом на корне,
     ниже. */
  --glass-bg:    var(--surface);
  --glass-line:  var(--line);
  --glass-blur:  none;
  --glass-sheen: none;
  --glass-shadow: none;
  --backdrop-opacity: 0;

  /* ── Движение ───────────────────────────────────────────── */
  /* Основная кривая: резкий старт, длинный мягкий хвост. Всё, что ездит. */
  --ease:        cubic-bezier(.32, .72, 0, 1);
  /* Ровная кривая — только для прозрачности. С основной затухание проходит
     96% пути за первую половину времени и читается как моргание, а не как
     плавное исчезновение. */
  --ease-fade:   cubic-bezier(.4, 0, .2, 1);

  /* Пружина: движение с небольшим перелётом. Третья и последняя кривая.
     Заводилась она шесть раз подряд — .28/1.18, .24/1.12, .28/1.12, .28/1.1,
     .26/1.2, .22/1.14 — и все шесть означали одно и то же, просто набирались
     заново. Разница на глаз не видна, а вот то, что кольцо и уведомление
     пружинят по-разному, видно. Теперь одна на всех. */
  --ease-spring: cubic-bezier(.26, 1.14, .4, 1);
  --dur-screen:  320ms;
  --dur-press:   90ms;
  --dur-release: 260ms;
  --stagger:     25ms;

  /* ── Типографика ────────────────────────────────────────── */
  /* Manrope — лежит локально, подключён в fonts.css. Геометричный и мягкий,
     ложится на крупные радиусы оболочки и на иконку-пузырь.

     Хвост из системных — страховка на случай, если файл не загрузился.
     Noto Sans и DejaVu Sans в конце не для красоты: они есть в образах
     Orange Pi, и без них вёрстка на плате поехала бы совсем. */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
          system-ui, 'Noto Sans', 'DejaVu Sans', sans-serif;
}

/* Стиль «стекло». Держится на backdrop-filter, то есть на перерисовке каждый
   кадр. Отключается сменой одной настройки, а не правкой вёрстки: на плате
   аппаратное ускорение может не завестись, и тогда это надо снять целиком. */
:root[data-style='glass'] {
  --glass-bg:    rgba(255, 255, 255, .07);
  --glass-line:  rgba(255, 255, 255, .13);
  --glass-blur:  blur(26px) saturate(180%);
  /* Блик по верхней кромке — то, что отличает стекло от просто мутного
     прямоугольника. Рисуется один раз, ничего не стоит. */
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .22);
  --glass-shadow: 0 8px 26px rgba(0, 0, 0, .32);
  --backdrop-opacity: 1;

}

/* ── Обои ───────────────────────────────────────────────────────────────────
   Фон главного экрана — три дрейфующих пятна, а не картинка. Причина
   практическая: растровые обои на 480x480 весят больше всей оболочки, а
   градиент занимает три строки и не мешает композитору — двигается только
   transform, цвет остаётся тем же самым весь кадр.

   Палитра выбирается на устройстве и приезжает из системного слоя, поэтому
   живёт в атрибуте на :root, а не в классе экрана: фон общий для всей
   оболочки, и лаунчер тут не главнее прочих.

   Третье пятно во всех палитрах глуше двух первых. Иначе три равных
   по силе цвета спорят между собой и фон начинает выглядеть грязным. */

/* Сияние — палитра по умолчанию. Записана дважды намеренно: на :root как
   запасная, пока обои не приехали с системного слоя, и под собственным
   именем — потому что карточка предпросмотра берёт переменные от корня.
   Стоило выбрать «Хвою», как корень зеленел, и «Сияние» на карточке зеленело
   вместе с ним, показывая не себя, а текущий выбор. */
:root,
[data-wallpaper='aurora'] {
  --wall-a: rgba(66, 133, 244, .5);
  --wall-b: rgba(155, 114, 203, .46);
  --wall-c: rgba(217, 101, 112, .34);
  --wall-a-soft: rgba(66, 133, 244, .3);
  --wall-b-soft: rgba(155, 114, 203, .26);
  --wall-c-soft: rgba(217, 101, 112, .16);
}

/* Закат: тёплый и низкий контраст. */
[data-wallpaper='sunset'] {
  --wall-a: rgba(240, 138, 93, .52);
  --wall-b: rgba(198, 87, 122, .44);
  --wall-c: rgba(247, 183, 107, .3);
  --wall-a-soft: rgba(240, 138, 93, .3);
  --wall-b-soft: rgba(198, 87, 122, .25);
  --wall-c-soft: rgba(247, 183, 107, .15);
}

/* Хвоя: холодная зелень, самый спокойный из всех. */
[data-wallpaper='pine'] {
  --wall-a: rgba(58, 157, 129, .48);
  --wall-b: rgba(41, 110, 138, .44);
  --wall-c: rgba(126, 186, 129, .28);
  --wall-a-soft: rgba(58, 157, 129, .28);
  --wall-b-soft: rgba(41, 110, 138, .25);
  --wall-c-soft: rgba(126, 186, 129, .14);
}

/* Полночь: почти монохром, фон едва угадывается. Для тех, кому пятна мешают. */
[data-wallpaper='midnight'] {
  --wall-a: rgba(74, 92, 138, .38);
  --wall-b: rgba(96, 84, 140, .34);
  --wall-c: rgba(60, 70, 104, .26);
  --wall-a-soft: rgba(74, 92, 138, .22);
  --wall-b-soft: rgba(96, 84, 140, .2);
  --wall-c-soft: rgba(60, 70, 104, .12);
}

/* Гранат: самая громкая палитра, красное с розовым. */
[data-wallpaper='garnet'] {
  --wall-a: rgba(214, 69, 89, .5);
  --wall-b: rgba(150, 58, 122, .44);
  --wall-c: rgba(233, 122, 138, .3);
  --wall-a-soft: rgba(214, 69, 89, .3);
  --wall-b-soft: rgba(150, 58, 122, .25);
  --wall-c-soft: rgba(233, 122, 138, .15);
}

/* Без обоев: ровный чёрный. На OLED это ещё и экономия — тёмный пиксель
   не светится вовсе.

   Пятна гасятся цветом, а не только скрытием фона: карточка предпросмотра
   рисуется теми же переменными, и без этого «без обоев» унаследовало бы
   палитру по умолчанию и выглядело бы как «Сияние». */
[data-wallpaper='none'] {
  --wall-a: transparent;
  --wall-b: transparent;
  --wall-c: transparent;
  --wall-a-soft: transparent;
  --wall-b-soft: transparent;
  --wall-c-soft: transparent;
}

:root[data-wallpaper='none'] .backdrop { display: none; }