/* BEATLY — «структура Spotify, плашки Яндекс Музыки, синий BEATLY».
   Правила системы (подробно — в DESIGN.md):
   • тёмная лестница поверхностей #000000 → #0e0e0e → #161616 → #1e1e1e;
   • акцент один — синий #3D7BFF; он функционален (play, active, CTA), не декоративен;
   • карточки скруглены 14px и залиты поверхностью; отдельных border нет —
     край даёт кромка внутри тени;
   • кнопки — залитые пилюли, основные — акцентные с мягким свечением;
   • на чёрном отделяет не тень, а волосяная кромка --line, вшитая в токены
     теней; сама тень остаётся только весом под крупным изображением;
   • движение быстрое: 0.22s, cubic-bezier(0.2, 0.8, 0.2, 1). */

:root {
  /* Акцент */
  --accent: #3D7BFF;
  --accent-hi: #5E90FF;
  --accent-deep: #2A5FD9;
  --accent-soft: #9DBDFF;
  --accent-tint: rgba(61, 123, 255, 0.14);
  --accent-glow: rgba(61, 123, 255, 0.35);
  --on-accent: #ffffff;

  /* Поверхности */
  --bg: #000000;
  --bg-rgb: 0, 0, 0;
  --surface-1: #0e0e0e;
  --surface-1-rgb: 14, 14, 14;
  --surface-2: #161616;
  --surface-3: #1e1e1e;
  --black: #000000;

  /* Текст */
  --t1: #ffffff;
  --t2: #b3b3b3;
  --t3: #8c8c8c;
  --t4: #6a6a6a;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --wash: rgba(255, 255, 255, 0.04);

  /* Радиусы: карточки крупно, обложки чуть меньше, кнопки — пилюля */
  --r-card: 14px;
  --r-cover: 10px;
  --r-sm: 8px;
  --pill: 999px;

  /* Тени */
  --shadow-1: 0 0 0 1px var(--line), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Движение */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.22s;
  --dur-sheet: 0.32s;
  /* Кинематографические кривые приветствия: на секундных дистанциях --ease
     слишком резко берёт с места. Пара зеркальная — приход и уход идут по
     одному пути в обратную сторону. Больше нигде не нужны. */
  --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cine-in: cubic-bezier(0.64, 0, 0.78, 0);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --pad-t: max(46px, calc(var(--safe-t) + 14px));
  --pad-b: max(26px, calc(var(--safe-b) + 10px));

  --gutter: 16px;
  --card-pad: 16px;
  --gap-el: 12px;
  --gap-sec: 32px;
}