/* ============================================================================
   APPLE-STYLE GLASS KIT  ·  v1.0
   Тёмная база + «жидкое стекло» (материалы/blur/vibrancy) + доступность.
   Основано на Apple HIG «Materials». Дизайн-система сайта Yelpin OS.

   ПОДКЛЮЧЕНИЕ:
     <link rel="stylesheet" href="glass.css">
     Шрифты (по желанию): Inter + JetBrains Mono с Google Fonts.

   ИДЕЯ В ДВУХ СТРОКАХ:
     1) Тёмная подложка + полупрозрачный БЕЛЫЙ текст (свет фона проходит сквозь = vibrancy).
     2) «Стекло» = полупрозрачный фон + backdrop-filter: blur() saturate(). Толще = контрастнее.
   ============================================================================ */

:root {
  /* ── Акцент ── */
  --accent: #0a84ff;                 /* системный синий; меняй под бренд */

  /* ── Шрифты ── */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── ТЕКСТ (вибрантность): полупрозрачный белый, иерархия по контрасту ──
       label(max) → secondary → tertiary → quaternary(min).
       НЕ использовать фиксированные серые (#888) — они не «дышат» на стекле. */
  --ink:   #f2f2f5;                    /* заголовки / основной текст */
  --soft:  rgba(238,240,247,.82);      /* вторичный текст, подзаголовки */
  --dim:   rgba(236,238,246,.62);      /* микро-подписи, метки секций */
  --faint: rgba(236,238,246,.38);      /* самый тихий; НЕ класть на тонкие материалы */

  /* ── Вибрантные заливки и разделитель (для кнопок/полей на стекле) ── */
  --fill:   rgba(255,255,255,.14);
  --fill-2: rgba(255,255,255,.09);
  --fill-3: rgba(255,255,255,.055);
  --separator: rgba(255,255,255,.12);

  /* ── ШКАЛА МАТЕРИАЛОВ (тоньше→толще = прозрачнее→контрастнее). Пара: фон + фильтр ──
       Выбирай по СМЫСЛУ, не по цвету:
       ultraThin — лёгкие оверлеи;   thin — хромота (меню-бар, тултипы, мелкие пилюли);
       regular   — панели/окна/док/виджеты (дефолт);
       thick     — текстоёмкие поповеры: меню, алерты, панель настроек, поиск. */
  --m-ut-bg:    rgba(60,62,76,.22);   --m-ut-fx:    blur(14px) saturate(1.6);
  --m-thin-bg:  rgba(44,46,58,.36);   --m-thin-fx:  blur(22px) saturate(1.8);
  --m-reg-bg:   rgba(38,40,52,.54);   --m-reg-fx:   blur(34px) saturate(1.9);
  --m-thick-bg: rgba(28,30,42,.72);   --m-thick-fx: blur(46px) saturate(2);

  /* ── Контент-слой: НЕ стекло. Плотная подложка, чтобы у текста/медиа был
       стабильный контраст поверх любого фона (HIG: content ≠ Liquid Glass). ── */
  --content-bg: rgba(16,18,26,.4);

  /* ── Скрим: затемнение под контролами/текстом поверх медиа (яркое фото/видео → ~35%). ── */
  --scrim:   rgba(0,0,0,.35);
  --scrim-2: rgba(0,0,0,.55);

  /* ── Движение (fluid motion): вход=замедление, выход=ускорение, стандарт=позиция. ── */
  --ease-out: cubic-bezier(.3,.8,.3,1);   /* появления, feedback */
  --ease-in:  cubic-bezier(.4,0,1,1);     /* исчезновения */
  --ease:     cubic-bezier(.4,0,.2,1);    /* движение/позиция */
  --t-fast: .12s;  --t-base: .2s;  --t-slow: .32s;

  /* Общий радиус (по желанию) */
  --r: 16px;
}

/* ── База ── */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #0b0d13;                 /* тёмная база; можно заменить на градиент/картинку-«обои» */
  -webkit-font-smoothing: antialiased;
}

/* Доступность: видимый фокус ТОЛЬКО с клавиатуры (мышь/тач не трогает) */
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
:focus:not(:focus-visible) { outline: none; }

/* ── МАТЕРИАЛЫ как утилиты ── */
.mat-ultrathin { background: var(--m-ut-bg);    -webkit-backdrop-filter: var(--m-ut-fx);    backdrop-filter: var(--m-ut-fx); }
.mat-thin      { background: var(--m-thin-bg);  -webkit-backdrop-filter: var(--m-thin-fx);  backdrop-filter: var(--m-thin-fx); }
.mat-regular   { background: var(--m-reg-bg);   -webkit-backdrop-filter: var(--m-reg-fx);   backdrop-filter: var(--m-reg-fx); }
.mat-thick     { background: var(--m-thick-bg); -webkit-backdrop-filter: var(--m-thick-fx); backdrop-filter: var(--m-thick-fx); }

/* Кромка «жидкого стекла»: светлый блик сверху + тонкая обводка. Вешать на панель/карточку. */
.glass-edge {
  border-radius: var(--r);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 30px 70px -14px rgba(0,0,0,.55);
}

/* Контент-слой поверх стекла (тела панелей с текстом) */
.content-surface { background: var(--content-bg); }

/* Скрим под контролами/подписями поверх медиа */
.scrim   { background: var(--scrim); }
.scrim-2 { background: var(--scrim-2); }

/* Текстовые роли */
.t-ink { color: var(--ink); } .t-soft { color: var(--soft); } .t-dim { color: var(--dim); }

/* ── ДОСТУПНОСТЬ: снижение прозрачности → материалы становятся СПЛОШНЫМИ,
     blur выключается. Переопределяем токены — всё стекло твердеет разом. ── */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --m-ut-bg:#23252f; --m-thin-bg:#23252f; --m-reg-bg:#1a1c26; --m-thick-bg:#141621;
    --m-ut-fx:none; --m-thin-fx:none; --m-reg-fx:none; --m-thick-fx:none;
    --content-bg:#0f1017;
  }
}
/* Повышенный контраст → текст/разделители плотнее */
@media (prefers-contrast: more) {
  :root {
    --soft: rgba(255,255,255,.96); --dim: rgba(255,255,255,.82);
    --faint: rgba(255,255,255,.62); --separator: rgba(255,255,255,.32);
  }
}
/* Уменьшение движения → почти мгновенные переходы/анимации */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}