/* ═══════════════════════════════════════════════════════════════
   dbtrail Design System — Single source of truth for all pages
   Reference: dbtrail-style-guide.md
   ═══════════════════════════════════════════════════════════════ */

/* ─── Font families ─── */
:root {
  --sans: 'Satoshi', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* ─── Light mode tokens (default) ─── */
:root {
  --bg: #FAFAF7;
  --bg-95: rgba(250, 250, 247, .9);
  --surface: #FFFFFF;
  --accent: #0FA47A;
  --accent-deep: #0A7D5C;
  --accent-light: #E5F6F0;
  --accent-mid: #9FE4CC;
  --accent-glow: rgba(15, 164, 122, .4);
  --danger: #DC2626;
  --danger-glow: rgba(220, 38, 38, .35);
  --amber: #D97706;
  --text: #0C1713;
  --text-secondary: #3D4F47;
  --text-muted: #6B7C74;
  --border: #E2DED6;
  --dark: #0B1215;
  --dark-surface: #141C20;
  --dark-border: rgba(255, 255, 255, .08);

  /* Border radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 9999px;

  /* ─── Backward-compat aliases ─── */
  --teal: var(--accent);
  --teal-hover: var(--accent-deep);
  --teal-light: var(--accent-light);
  --teal-mid: var(--accent-mid);
  --teal-glow: var(--accent-glow);
  --muted: var(--text-muted);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --border-focus: var(--accent);
  --text-primary: var(--text);
  --text-accent: var(--accent);
  --bg-dark: var(--dark);
}

/* ─── Dark mode overrides ─── */
html.dark {
  --bg: #0D1117;
  --bg-95: rgba(13, 17, 23, .92);
  --surface: #161B22;
  --accent: #2DD4A0;
  --accent-deep: #1AAE82;
  --accent-light: rgba(45, 212, 160, .1);
  --accent-mid: rgba(45, 212, 160, .2);
  --accent-glow: rgba(45, 212, 160, .3);
  --danger: #F87171;
  --danger-glow: rgba(248, 113, 113, .25);
  --amber: #FBBF24;
  --text: #E6EDF3;
  --text-secondary: #9DABB8;
  --text-muted: #5E6D7A;
  --border: rgba(255, 255, 255, .08);
  --border-light: rgba(255, 255, 255, .06);
}

/* ─── Dot grid utility ─── */
.dot-grid {
  background-image: radial-gradient(circle, rgba(12, 23, 19, .06) 1px, transparent 1px);
  background-size: 24px 24px;
}
html.dark .dot-grid {
  background-image: radial-gradient(circle, rgba(45, 212, 160, .06) 1px, transparent 1px);
}

/* ─── Keyframe animations ─── */
@keyframes trailPulse {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent-glow); }
  50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 8px var(--accent-glow); }
}
@keyframes scanDown {
  0% { top: -60px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ─── Trail connector ─── */
.trail-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  position: relative;
}
.trail-connector--sm { padding: 12px 0; }
.trail-connector-line {
  width: 2px;
  height: 48px;
  background: linear-gradient(180deg, var(--accent), rgba(15, 164, 122, .15));
  border-radius: 1px;
}
.trail-connector--sm .trail-connector-line { height: 24px; }
.trail-connector-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  margin-top: -1px;
  animation: trailPulse 3s ease infinite;
}
html.dark .trail-connector-line {
  background: linear-gradient(180deg, var(--accent), rgba(45, 212, 160, .1));
}
.trail-connector.on-dark .trail-connector-line {
  background: linear-gradient(180deg, rgba(15, 164, 122, .4), rgba(15, 164, 122, .08));
}
html.dark .trail-connector.on-dark .trail-connector-line {
  background: linear-gradient(180deg, rgba(45, 212, 160, .4), rgba(45, 212, 160, .08));
}
.trail-connector.on-dark { padding: 16px 0 4px; }
.trail-connector.on-dark.trail-connector--sm { padding: 8px 0 4px; }

/* ─── Eyebrow label ─── */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}