/* AG Cluster Live design tokens — COPIED (not imported) from the SnapStream Drill Deck's
   src/tokens.css (snapstream/web-dashboard/drill-deck, feat/drill-deck-f1-2026-08-03), which
   itself was copied from vexor-docs/dashboard/app/globals.css, per M7's "copy the token CSS, do
   not import across repos" rule (cited in the Drill Deck design doc §B.3; reused here per the AG
   Dashboard D2 brief's "read as one family" requirement). Byte-identical to the Drill Deck copy —
   same token/system layer (:root, .glass, .ambient, .tick-gauge, .glow-text, .hero-number), same
   system-font fallback (no font files, no external font requests). Do not edit this file directly
   to change AG-specific look; add AG-specific rules in app.css instead, so a future re-copy from
   upstream stays a clean diff. */

:root {
  --canvas: #0a0c10;
  --canvas-2: #12151c;
  --ink: #edeff3;
  --ink-dim: #8c93a3;
  --ink-faint: #5b6170;
  --line: #ffffff12;
  --glass-fill: rgba(237, 239, 243, 0.026);
  --glass-border: rgba(237, 239, 243, 0.11);
  --glass-highlight: rgba(237, 239, 243, 0.04);
  --mag: #f72585;
  --mag-gl: #ff6ec7;
  --blue: #3ec5ff;
  --blue-gl: #8fe3ff;
  --ok: #22d3ee;
  --ok-dim: rgba(34, 211, 238, 0.11);
  --wait: #ffb84d;
  --wait-dim: rgba(255, 184, 77, 0.13);
  --bad: #ff5d5d;
  --bad-dim: rgba(255, 93, 93, 0.13);
  --blob-opacity: 0.55;
  --font-sans: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  --canvas: #f1f3f7;
  --canvas-2: #e4e8f0;
  --ink: #171b24;
  --ink-dim: #565e70;
  --ink-faint: #8c93a3;
  --line: #0a0c1018;
  --glass-fill: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(10, 12, 16, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.75);
  --mag: #d61470;
  --mag-gl: #f72585;
  --blue: #0ea5e9;
  --blue-gl: #3ec5ff;
  --ok: #0891b2;
  --ok-dim: rgba(8, 145, 178, 0.1);
  --wait: #a16a10;
  --wait-dim: rgba(161, 106, 16, 0.12);
  --bad: #cc3a3a;
  --bad-dim: rgba(204, 58, 58, 0.1);
  --blob-opacity: 0.32;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --canvas: #f1f3f7;
    --canvas-2: #e4e8f0;
    --ink: #171b24;
    --ink-dim: #565e70;
    --ink-faint: #8c93a3;
    --line: #0a0c1018;
    --glass-fill: rgba(255, 255, 255, 0.38);
    --glass-border: rgba(10, 12, 16, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.75);
    --mag: #d61470;
    --mag-gl: #f72585;
    --blue: #0ea5e9;
    --blue-gl: #3ec5ff;
    --ok: #0891b2;
    --ok-dim: rgba(8, 145, 178, 0.1);
    --wait: #a16a10;
    --wait-dim: rgba(161, 106, 16, 0.12);
    --bad: #cc3a3a;
    --bad-dim: rgba(204, 58, 58, 0.1);
    --blob-opacity: 0.32;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 200ms ease, color 200ms ease;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -20%, var(--canvas-2), transparent 60%),
    var(--canvas);
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--blob-opacity);
  will-change: transform;
}
.ambient::before {
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--mag) 26%, transparent), transparent 65%);
  top: -18vmax;
  left: -12vmax;
  animation: drift-a 120s ease-in-out infinite alternate;
}
.ambient::after {
  background: radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 65%);
  bottom: -20vmax;
  right: -14vmax;
  animation: drift-b 90s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vmax, 6vmax) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.08); }
  to   { transform: translate(-8vmax, -5vmax) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient::before,
  .ambient::after {
    animation: none;
  }
}

.glass {
  background: linear-gradient(165deg, var(--glass-highlight), transparent 45%), var(--glass-fill);
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 10px 34px rgba(4, 5, 8, 0.28);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms ease;
}
.glass-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(4, 5, 8, 0.36);
}

.brand-gradient {
  background: linear-gradient(100deg, var(--mag), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.display { font-family: var(--font-display); }

.hero-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color 200ms ease;
}

.tick-gauge {
  display: flex;
  gap: 3px;
  height: 14px;
  align-items: flex-end;
}
.tick-gauge span {
  flex: 1;
  border-radius: 1px;
  background: var(--line);
  height: 9px;
  transition: background 300ms ease, height 300ms ease;
}
.tick-gauge span.lit { height: 14px; }

.glow-text { text-shadow: 0 0 26px color-mix(in srgb, currentColor 40%, transparent); }
.tick-gauge span.lit { box-shadow: 0 0 7px color-mix(in srgb, currentColor 55%, transparent); }