/*
 * KenniiServer Mini App color layer.
 * Telegram semantic theme roles win when available; fixed values are fallbacks only.
 */

:root {
  --bg: var(--tg-theme-bg-color, #0b0f16);
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-secondary-bg-color, #141a24));
  --surface-strong: color-mix(in srgb, var(--surface) 88%, var(--text) 12%);
  --text: var(--tg-theme-text-color, #f4f7fb);
  --hint: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #a8b0c0));
  --link: var(--tg-theme-link-color, #6f96ff);
  --button: var(--tg-theme-button-color, #527ef4);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --accent: var(--tg-theme-accent-text-color, #6f96ff);
  --separator: var(--tg-theme-section-separator-color, color-mix(in srgb, var(--hint) 24%, transparent));
  --header-bg: var(--tg-theme-header-bg-color, var(--bg));
  --bottom-bg: var(--tg-theme-bottom-bar-bg-color, var(--bg));

  /* Kennii signature: cool, restrained, never used as an alarm semantic. */
  --signature-primary: var(--accent);
  --signature-secondary: color-mix(in srgb, var(--accent) 76%, #9279ff 24%);
  --signature-soft: color-mix(in srgb, var(--signature-primary) 10%, transparent);

  /* Dark/default semantic roles. Always accompanied by text/icon/shape. */
  --good: #5dd6a8;
  --warn: #f6c565;
  --bad: #ff7a85;
  --unknown: #a0a8b6;

  --shadow: 0 14px 40px rgba(0, 0, 0, .13);
}

/* Telegram reports its active scheme to color-system.js. */
html[data-tg-scheme="light"] {
  --bg: var(--tg-theme-bg-color, #f5f7fb);
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-secondary-bg-color, #ffffff));
  --text: var(--tg-theme-text-color, #172033);
  --hint: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #5c6678));
  --link: var(--tg-theme-link-color, #315cf5);
  --button: var(--tg-theme-button-color, #315cf5);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --accent: var(--tg-theme-accent-text-color, #315cf5);
  --good: #087f5b;
  --warn: #805400;
  --bad: #b42333;
  --unknown: #667085;
  --shadow: 0 12px 34px rgba(31, 45, 70, .08);
}

@media (prefers-color-scheme: light) {
  html:not([data-tg-scheme]) {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --text: #172033;
    --hint: #5c6678;
    --link: #315cf5;
    --button: #315cf5;
    --button-text: #ffffff;
    --accent: #315cf5;
    --good: #087f5b;
    --warn: #805400;
    --bad: #b42333;
    --unknown: #667085;
    --shadow: 0 12px 34px rgba(31, 45, 70, .08);
  }
}

/* Native Telegram containers, with a small Kennii signature only where it helps hierarchy. */
.topbar {
  background: color-mix(in srgb, var(--header-bg) 94%, transparent);
}

.bottom-nav {
  background: color-mix(in srgb, var(--bottom-bg) 94%, transparent);
}

.card,
.metric-card,
.segmented,
.back-button,
.icon-button {
  border-color: var(--separator);
}

.brand-mark {
  background: linear-gradient(145deg, var(--button), var(--signature-secondary));
  box-shadow: 0 9px 26px color-mix(in srgb, var(--signature-primary) 24%, transparent);
}

.nav-item.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--signature-primary) 10%, transparent);
}

.info-icon {
  color: var(--accent);
  background: color-mix(in srgb, var(--signature-primary) 11%, var(--surface));
}

.chart-wrap {
  color: var(--accent);
}

.chart-line {
  filter: drop-shadow(0 2px 5px color-mix(in srgb, currentColor 16%, transparent));
}

/* Keep healthy state calm. Warning/critical become salient only when present. */
.hero.status-OK::after {
  opacity: .075;
}

.hero.status-WARNING::after {
  opacity: .15;
}

.hero.status-CRITICAL::after {
  opacity: .18;
}

/* Selected controls use the Telegram button pair for a guaranteed semantic pairing. */
.segmented button.active,
.primary-button {
  background: var(--button);
  color: var(--button-text);
}

/* Meaningful focus must remain visible independent of hue preference. */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 74%, var(--text) 26%);
  outline-offset: 2px;
}

/* When contrast is explicitly requested, reduce translucent effects and strengthen separators. */
@media (prefers-contrast: more) {
  :root {
    --separator: color-mix(in srgb, var(--text) 42%, transparent);
  }
  .topbar,
  .bottom-nav {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card,
  .metric-card,
  .segmented,
  .back-button,
  .icon-button {
    border-width: 2px;
  }
}