/* Direction: Venom — dark toxic-green data tool, grotesk display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0a0f0b;
  --surface: #121a14;
  --surface-2: #161b17;
  --border: #2c312d;
  --border-strong: #545754;
  --ink: #e9f3ea;
  --muted: #909891;
  --accent: #8cf03c;
  --accent-hover: #9df259;
  --accent-ink: #0a0f0b;
  --accent-text: #8cf03c;
  --accent-strong: #8cf03c;
  --accent-soft: #274116;
  --accent-border: #457421;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0c2816;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2f1e0b;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #31120f;
  --danger-strong: #d16969;
  --chart-1: #8cf03c;
  --chart-2: #35d7d6;
  --chart-3: #88bbfb;
  --chart-4: #dfa2fb;
  --chart-5: #fa929b;
  --chart-6: #faac1f;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 14px;
  --radius-btn: 10px;
  --display-tracking: -0.03em;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #dddddd;
  --border-strong: #b6b7b6;
  --ink: #0a0f0b;
  --muted: #6c6f6d;
  --accent: #81dd37;
  --accent-hover: #6ebc2f;
  --accent-ink: #0a0f0b;
  --accent-text: #487a1f;
  --accent-strong: #487a1f;
  --accent-soft: #edfae3;
  --accent-border: #c6f0a5;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #5ba518;
  --chart-2: #03a0a1;
  --chart-3: #0c75dd;
  --chart-4: #c171e4;
  --chart-5: #c73752;
  --chart-6: #c38300;
}

.venom-hero {
  background:
    radial-gradient(900px 380px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px) 0 0 / 100% 36px;
}
.venom-dot {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.venom-avatar {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text);
}
.venom-row { transition: border-color .15s, transform .15s; }
.venom-row:hover { border-color: var(--accent); transform: translateY(-1px); }
html.reduced-motion .venom-row { transition: none; transform: none; }