/* ═══════════════════════════════════════════════════════════════════════════
   poidem — тёмная сцена и неоновый градиент из лого (public/logo.jpg).
   Градиент живёт там, где действие или фирменный знак; остальное — нейтрально.
   Токены задаются один раз здесь и общие для лендинга (index.html) и кабинета
   (app.html): иначе две страницы одного бренда разъедутся при первой же правке.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — тема одна, тёмная — */
  --paper:        #0F1216;
  --surface:      #171B21;
  --surface-2:    #1F242C;
  --line:         #2A3038;
  --line-strong:  #3A424D;

  --text:         #EDEFF2;
  --text-2:       #A2ABB8;
  --text-3:       #7E8793;
  --on-accent:    #FFFFFF;   /* текст — только на --grad-cta (от 4.89:1), на --grad-brand — лишь значки */

  --accent:       #F552E0;   /* пурпур из «P», осветлён под текст: 5.3:1 даже на surface-2 */
  --accent-soft:  #3A1236;

  /* Градиент «P» с лого: снизу-слева оранжевый, сверху-справа синий.
     Белый текст на оранжевом краю — 2.7:1, поэтому он только для знаков без текста. */
  --grad-brand: linear-gradient(45deg, #FD7537 0%, #FD5265 20%, #F107DC 48%, #6A2BFF 76%, #0188FB 100%);
  /* Средняя, тёмная часть того же градиента — под кнопки с белым текстом. */
  --grad-cta:   linear-gradient(100deg, #C409D0 0%, #5A22F0 100%);
  --glow:       0 12px 32px -12px rgba(241, 7, 220, 0.65);
  /* Элементу с рамкой градиент ставится с border-box. Иначе он считается по
     padding-box и повторяется под прозрачной рамкой: по краю круга проступает
     противоположный конец градиента — тонкая красная или синяя полоска. */
  --plan:         #6E8CFF;   /* кобальт: только «в планы» */
  --on-plan:      #0A1024;
  --plan-soft:    #172244;

  --scrim:        rgba(4, 6, 9, 0.66);
  --shade-top:    rgba(12, 15, 19, 0.00);
  --shade-mid:    rgba(12, 15, 19, 0.42);
  --shade-low:    rgba(12, 15, 19, 0.86);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --sh-2: 0 10px 28px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sh-3: 0 30px 64px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* — шкала отступов, 4px база — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* — типографическая шкала — */
  --fs-micro: 11px; --fs-2xs: 12px; --fs-xs: 13px;  --fs-sm: 14px;
  --fs-md: 15.5px;  --fs-lg: 18px;  --fs-xl: 22px;
  --fs-2xl: 27px;   --fs-3xl: 33px;

  --font-ui: Onest, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Unbounded, var(--font-ui);

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* — движение: кривые Material 3, длительности ниже порога Доэрти (400 мс) — */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --ease-out:   cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in:    cubic-bezier(0.3, 0, 0.8, 0.15);
  --t-fast: 140ms; --t-mid: 220ms; --t-slow: 320ms;

  --col: 468px;   /* ширина колонки — и предельная ширина колоды */
  --col-wide: 760px;   /* колонка на планшете: «Афише» и профилю тесно в 468 */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Регистрация нужна, чтобы кольцо доезжало до нового процента плавно:
   незарегистрированное custom property не анимируется, а перескакивает. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }