/* Мост между Hakku DS 2.x и слоем платформы практикума.
   Подключается ПОСЛЕ hakku.bundle.css и ДО app.css / screen.css.

   Дизайн Hakku 2.0 живёт в вендоренной дизайн-системе (design_system/): paper-first,
   Tektur в заголовках, Manrope в теле, точечный акцент #2A3EF4, светлая тема по
   умолчанию и тёмная. Здесь ничего нового не рисуем: только связываем токены
   --hk-* (их читают app.css и screen/screen.css) с семантическими токенами ДС,
   чтобы обе темы переключались одним атрибутом data-theme на <body>.

   Правила: цвет и шрифт — только токенами; акцент один на экран (синий — действие,
   выбор, ссылка); зелёный означает «сдано» и всегда подписан словом; оранжевый —
   внимание или ошибка. */

/* Токены живут на body, а не на :root: свойства с var() вычисляются там, где объявлены,
   и объявленные на :root навсегда остались бы значениями светлой темы. */
body {
  /* ---- токены платформы поверх семантических токенов ДС ------------------- */
  --hk-ink:         var(--fg);
  --hk-body:        var(--fg-muted);
  --hk-muted:       var(--fg-faint);
  --hk-bg:          var(--surface);
  --hk-card:        var(--surface-card);
  --hk-soft:        var(--surface-soft);
  --hk-line:        var(--border);
  --hk-line-strong: color-mix(in srgb, var(--fg) 32%, transparent);
  --hk-tint:        color-mix(in srgb, var(--fg) 5%, transparent);
  --hk-accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface-card));
  --hk-white:       #ffffff;   /* только то, что обязано быть белым: QR, лист документа */
  --hk-blackout:    #000000;

  /* статусы: у ДС нет зелёного, берём спокойный и подписываем словом */
  --hk-green:       #12874a;
  --hk-green-ink:   #0d6b3a;
  --hk-on-green:    #ffffff;   /* текст на зелёной заливке */
  --hk-orange:      var(--orange);
  --hk-orange-ink:  color-mix(in srgb, var(--orange) 70%, var(--ink));

  /* блок промпта: тёмный в обеих темах, как код в продуктах Hakku */
  --hk-card-dark:        #0a0a0a;
  --hk-on-dark:          #ffffff;
  --hk-on-dark-muted:    rgba(255,255,255,.72);
  --hk-on-dark-line:     rgba(255,255,255,.16);
  --hk-on-dark-line-2:   rgba(255,255,255,.30);

  /* формы и шрифты */
  --hk-r-card:  var(--r-lg);
  --hk-r-badge: var(--r-sm);
  --hk-r-pill:  var(--r-pill);
  --hk-font:      var(--font-body);
  --hk-font-mono: var(--font-mono);
  --hk-focus:     var(--focus-ring, 0 0 0 3px rgba(42,62,244,.25));
}

/* Тёмная тема: статусные цвета светлее, чтобы читались на чёрном. */
body[data-theme="dark"] {
  --hk-green:      #3ecf82;
  --hk-green-ink:  #5be39a;
  --hk-on-green:   #04210f;
  --hk-orange-ink: #ff9a45;
  --hk-accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface-card));
  --hk-tint:       color-mix(in srgb, var(--fg) 8%, transparent);
  --hk-card-dark:  #141414;
  --accent:        #5b6bff;   /* синий ДС темнеет на чёрном; на тёмном берём светлее */
}

html { background: var(--surface); }
body { background: var(--surface); color: var(--fg); font-family: var(--font-body); }
::selection { background: var(--accent); color: var(--accent-on); }

/* Переключатель темы (оба экрана) */
.theme-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent;
  color: var(--fg); cursor: pointer; font-size: 16px; line-height: 1;
}
@media (hover: hover) { .theme-toggle:hover { border-color: var(--border-strong); } }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Марка в подписи: нейтральная, без логотипов заказчика */
.brand-word { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.brand-word i { font-style: normal; color: var(--accent); padding: 0 .25em; }

/* Свечение обложки и входа: два мягких пятна акцентных цветов ДС, без картинок. */
body {
  --hk-glow:
    radial-gradient(52% 70% at 88% 38%, rgba(42,62,244,.16), transparent 72%),
    radial-gradient(34% 50% at 98% 78%, rgba(213,31,117,.10), transparent 72%);
}
body[data-theme="dark"] {
  --hk-glow:
    radial-gradient(52% 70% at 88% 38%, rgba(91,107,255,.26), transparent 72%),
    radial-gradient(34% 50% at 98% 78%, rgba(213,31,117,.18), transparent 72%);
}