/* ════════════════════════════════════════════════════════════════
   glean-ui v1 — shared utilities, motion & chrome polish
   Load after tokens.css. App-specific components live in each app.
   ════════════════════════════════════════════════════════════════ */

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--surface1) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface2); }

/* keyboard focus */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* text utilities — safe for JS-generated markup */
.t-ok     { color: var(--ok) !important; }
.t-warn   { color: var(--warn) !important; }
.t-danger { color: var(--danger) !important; }
.t-info   { color: var(--info) !important; }
.t-dim    { color: var(--overlay1) !important; }
.t-accent { color: var(--accent) !important; }
.t-mono   { font-family: var(--font-mono) !important; }

/* glass chrome helper */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--glass-border);
}

/* gradient text helper (brand marks) */
.grad-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* skeleton shimmer */
.skel {
  background: linear-gradient(90deg, var(--surface0) 25%,
              color-mix(in srgb, var(--surface1) 60%, var(--surface0)) 37%,
              var(--surface0) 63%);
  background-size: 400% 100%;
  animation: g-shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}

/* live-status dot */
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--ok); }
.dot.pulse { animation: g-pulse 2s ease-in-out infinite; }
.dot.off { background: var(--overlay0); animation: none; }
.dot.bad { background: var(--danger); }

/* shared keyframes */
@keyframes g-fade-up { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
@keyframes g-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes g-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes g-pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); }
  50%     { box-shadow: 0 0 0 5px transparent; }
}
@keyframes g-blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,-30px) scale(1.08); }
  66%     { transform: translate(-30px,25px) scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}