/* ═══════════════════════════════════════════════════════════════════════════
   ZOO.DEV-INSPIRED DESIGN TOKENS
   Глобальная палитра проекта. Применяется в base.html, перекрашивает весь сайт.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── core palette ── */
  --zoo-bg:        #0e0e10;        /* near-black canvas */
  --zoo-bg-2:      #16161a;        /* elevated surfaces */
  --zoo-bg-3:      #1c1c22;        /* nested elevated */
  --zoo-border:    rgba(229,234,222,.10);
  --zoo-border-2:  rgba(229,234,222,.18);

  --zoo-text:      #e5eade;        /* off-white — signature zoo text */
  --zoo-text-dim:  #9aa5a0;
  --zoo-text-faint:#5a615c;

  --zoo-green:     #29ffa4;        /* signature mint */
  --zoo-green-2:   #01ffc3;
  --zoo-green-3:   #7afbac;
  --zoo-blue:      #16a34a;        /* раньше electric blue — унифицирован в зелёный */
  --zoo-cyan:      #14b8a6;        /* раньше cyan — унифицирован в teal */
  --zoo-orange:    #ff6700;        /* warning / energy */
  --zoo-yellow:    #d0ff00;        /* highlight */
  --zoo-purple:    #9457eb;
  --zoo-red:       #ff4757;

  /* семантические алиасы */
  --zoo-theme:     var(--zoo-green);
  --zoo-success:   var(--zoo-green);
  --zoo-info:      var(--zoo-blue);
  --zoo-warn:      var(--zoo-orange);
  --zoo-danger:    var(--zoo-red);

  /* шрифты */
  --zoo-font-sans: 'Onest', system-ui, -apple-system, 'Inter', sans-serif;
  --zoo-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ───── reset slim ───── */
* { box-sizing: border-box; }

/* ───── Zoo-style button (mono uppercase, outlined→filled на hover) ─────
   Использование:
     <a class="zoo-btn" data-variant="filled" data-theme="green">…</a>
     <a class="zoo-btn" data-variant="outlined" data-theme="blue">…</a>
   data-theme: green | blue | orange | yellow | white
*/

.zoo-btn {
  --bg-color:            transparent;
  --text-color:          var(--zoo-text);
  --border-color:        var(--zoo-text);
  --hover-bg-color:      var(--zoo-text);
  --hover-text-color:    var(--zoo-bg);
  --hover-border-color:  var(--zoo-text);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  font-family: var(--zoo-font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s;
  position: relative; overflow: hidden;
  white-space: nowrap;
}
.zoo-btn:hover {
  background: var(--hover-bg-color);
  color: var(--hover-text-color);
  border-color: var(--hover-border-color);
}
.zoo-btn:active { transform: translateY(1px); }

/* variant — filled */
.zoo-btn[data-variant="filled"] {
  --bg-color: var(--border-color);
  --text-color: var(--zoo-bg);
  --hover-bg-color: transparent;
  --hover-text-color: var(--border-color);
}

/* themes */
.zoo-btn[data-theme="green"]  { --border-color: var(--zoo-green); --hover-border-color: var(--zoo-green); }
.zoo-btn[data-theme="green"][data-variant="filled"]  { --hover-text-color: var(--zoo-green); }
.zoo-btn[data-theme="blue"]   { --border-color: var(--zoo-blue);  --hover-border-color: var(--zoo-blue); }
.zoo-btn[data-theme="blue"][data-variant="filled"]   { --hover-text-color: var(--zoo-blue); }
.zoo-btn[data-theme="orange"] { --border-color: var(--zoo-orange);--hover-border-color: var(--zoo-orange); }
.zoo-btn[data-theme="orange"][data-variant="filled"] { --hover-text-color: var(--zoo-orange); }
.zoo-btn[data-theme="yellow"] { --border-color: var(--zoo-yellow);--hover-border-color: var(--zoo-yellow); }
.zoo-btn[data-theme="yellow"][data-variant="filled"] { --hover-text-color: var(--zoo-yellow); }

/* ───── Mono eyebrow (метка над заголовком) ─────
   <span class="zoo-eyebrow">// access</span>
*/
.zoo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--zoo-font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zoo-green);
}
.zoo-eyebrow.blue   { color: var(--zoo-blue); }
.zoo-eyebrow.orange { color: var(--zoo-orange); }
.zoo-eyebrow.dim    { color: var(--zoo-text-dim); }
.zoo-eyebrow::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
}

/* ───── Zoo-style mono-label (карточек, статусов) ───── */
.zoo-mono {
  font-family: var(--zoo-font-mono);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ───── Gradient line accent (как у zoo) ───── */
.zoo-line {
  height: 2px;
  background: linear-gradient(90deg, var(--zoo-blue), var(--zoo-green));
  border-radius: 2px;
}

/* ───── Pill chip (тонкий бордер + лёгкий tint фона) ───── */
.zoo-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--zoo-border-2);
  background: rgba(229,234,222,.04);
  font-family: var(--zoo-font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zoo-text-dim);
}
.zoo-chip.green  { color: var(--zoo-green);  background: color-mix(in srgb, var(--zoo-green) 12%, transparent); border-color: color-mix(in srgb, var(--zoo-green) 35%, transparent); }
.zoo-chip.blue   { color: var(--zoo-blue);   background: color-mix(in srgb, var(--zoo-blue) 12%, transparent);  border-color: color-mix(in srgb, var(--zoo-blue) 35%, transparent); }
.zoo-chip.orange { color: var(--zoo-orange); background: color-mix(in srgb, var(--zoo-orange) 12%, transparent);border-color: color-mix(in srgb, var(--zoo-orange) 35%, transparent); }

/* ───── pulse dot ───── */
.zoo-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--zoo-green);
  box-shadow: 0 0 12px var(--zoo-green);
  animation: zoo-pulse 2.2s ease-in-out infinite;
}
@keyframes zoo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.85); }
}

/* ───── Selection ───── */
::selection {
  background: var(--zoo-green);
  color: var(--zoo-bg);
}