/* proektone brand tokens, v1.2
   Подключение:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geologica:wght,SHRP@300..700,0..100&display=swap">
   <link rel="stylesheet" href="brand.css">
   <body class="po">
   Тема одна, тёмная. В печати и PDF фон тоже тёмный. */

:root {
  /* Цвет */
  --po-bg: #14110E;            /* Графит, фон */
  --po-surface: #1C1814;       /* поверхность: карточки, секции */
  --po-surface-2: #25201B;     /* приподнятая поверхность: поповеры, поля */
  --po-line: rgba(243, 237, 228, 0.10);
  --po-line-strong: rgba(243, 237, 228, 0.20);
  --po-text: #F3EDE4;          /* Крем, 16.2:1 на фоне */
  --po-text-2: #A39888;        /* Пепел, 6.6:1 на фоне */
  --po-accent: #D2F53C;        /* Фосфор P31: курсор, главная цифра, основная кнопка. 15.1:1 */
  --po-on-accent: #14110E;     /* текст на Фосфоре, 15.1:1 */
  --po-glow: rgba(210, 245, 60, 0.38);
  --po-ok: #D2F53C;            /* статус «работает» = Фосфор: живое светится */
  --po-err: #FF6B5A;           /* Сбой, только в продуктах. 6.7:1 */
  color-scheme: dark;

  /* Шрифт */
  --po-font: 'Geologica', 'Segoe UI', system-ui, sans-serif;
  --po-sharp-head: 60;         /* ось SHRP у заголовков */
  --po-sharp-body: 0;          /* у основного текста */

  --po-fs-display: clamp(3rem, 8vw, 7rem);
  --po-fs-h1: clamp(2.25rem, 5vw, 4rem);
  --po-fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --po-fs-h3: 1.375rem;
  --po-fs-body: 1.0625rem;     /* 17px */
  --po-fs-small: 0.875rem;
  --po-fs-label: 0.8125rem;    /* 13px, подписи */

  /* Сетка: шаг 4px */
  --po-s-1: 4px;  --po-s-2: 8px;  --po-s-3: 12px; --po-s-4: 16px;
  --po-s-5: 24px; --po-s-6: 32px; --po-s-7: 48px; --po-s-8: 64px;
  --po-s-9: 96px; --po-s-10: 128px;
  --po-shell: 1200px;
  --po-gutter: clamp(16px, 4vw, 48px);

  /* Формы */
  --po-r-sm: 6px;
  --po-r-md: 12px;
  --po-r-lg: 20px;
  --po-r-icon: 21%;

  /* Движение */
  --po-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --po-dur-fast: 140ms;
  --po-dur-base: 240ms;
  --po-dur-slow: 480ms;
  --po-blink: 1.1s;
}

/* База */
.po {
  background: var(--po-bg);
  color: var(--po-text);
  font-family: var(--po-font);
  font-size: var(--po-fs-body);
  line-height: 1.6;
  font-variation-settings: 'SHRP' var(--po-sharp-body);
  -webkit-font-smoothing: antialiased;
  print-color-adjust: exact;   /* печать сохраняет тёмный фон */
  -webkit-print-color-adjust: exact;
}
.po h1, .po h2, .po h3, .po-head {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variation-settings: 'SHRP' var(--po-sharp-head);
  text-wrap: balance;
}
.po :focus-visible {
  outline: 2px solid var(--po-accent);
  outline-offset: 3px;
}

/* Изюминка «Фосфор» */

/* 1. Курсор: один на экран, после лого или в конце главного заголовка */
.po-cursor {
  display: inline-block;
  width: 0.45em;
  height: 0.74em;
  margin-left: 0.08em;
  background: var(--po-accent);
  vertical-align: baseline;
  animation: po-blink var(--po-blink) steps(1) infinite;
}
@keyframes po-blink { 50% { opacity: 0; } }
/* последнее слово + курсор: курсор не переносится на строку один */
.po-nowrap { white-space: nowrap; }

/* 2. Свечение: одна ключевая цифра на экран */
.po-glow {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--po-accent);
  text-shadow: 0 0 0.5em var(--po-glow);
  font-variant-numeric: tabular-nums;
}

/* 3. Подписи: номера, статусы, даты. Тот же Geologica, обычный регистр, без разрядки,
   цифры одной ширины, чтобы столбцы и счётчики не прыгали */
.po-label {
  font-size: var(--po-fs-label);
  line-height: 1.5;
  color: var(--po-text-2);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .po-cursor { animation: none; }
  .po *, .po *::before, .po *::after { transition-duration: 0.01ms !important; }
}