/* ═══════════════════════════════════════════════════════════════
   DDN · Design Tokens · v2
   Exact match to Claude Design prototype.
   Color theory: obsidian base, jade=profit, gold=LOCK, crimson=loss only
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — obsidian base, warm-tinted for long sessions */
  --ddn-bg:         #0a0b0d;
  --ddn-surface:    #111316;
  --ddn-surface-2:  #15181c;
  --ddn-surface-3:  #1c2026;
  --ddn-border:     #1f232a;
  --ddn-border-hi:  #2a2f38;

  /* Text hierarchy */
  --ddn-fg:         #f5f6f7;
  --ddn-fg-muted:   #a1a6ad;
  --ddn-fg-dim:     #6b7178;
  --ddn-fg-faint:   #454a52;

  /* Jade — profit, wins, CTA */
  --ddn-jade:       #10b981;
  --ddn-jade-dark:  #059669;
  --ddn-jade-soft:  rgba(16,185,129,.14);
  --ddn-jade-border:rgba(16,185,129,.3);

  /* Gold (electric cyan) — LOCK picks, premium, scarcity */
  --ddn-gold:       #22d3ee;
  --ddn-gold-dark:  #0891b2;
  --ddn-gold-soft:  rgba(34,211,238,.14);
  --ddn-gold-border:rgba(34,211,238,.4);
  --ddn-gold-ink:   #001418;

  /* Blue — data, analytics, institutional */
  --ddn-blue:       #3b82f6;
  --ddn-blue-soft:  rgba(59,130,246,.14);
  --ddn-blue-border:rgba(59,130,246,.3);

  /* Crimson — LOSSES ONLY. Never for warnings/errors. */
  --ddn-loss:       #ef4444;
  --ddn-loss-soft:  rgba(239,68,68,.1);

  /* Violet — sharp/whale signal */
  --ddn-violet:     #8b5cf6;
  --ddn-violet-soft:rgba(139,92,246,.14);

  /* Type */
  --ddn-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ddn-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ddn-serif: 'Source Serif 4', Georgia, serif;

  /* Radius */
  --ddn-r-xs: 3px;
  --ddn-r-sm: 5px;
  --ddn-r-md: 8px;
  --ddn-r-lg: 12px;
  --ddn-r-pill: 999px;

  /* Motion — subtle, fast, never bouncy */
  --ddn-motion-fast: 120ms cubic-bezier(.4,0,.2,1);
  --ddn-motion-base: 180ms cubic-bezier(.4,0,.2,1);
  --ddn-motion-slow: 280ms cubic-bezier(.4,0,.2,1);

  /* ── Backward compat: old var names → new values ── */
  --bg-body: var(--ddn-bg);
  --bg-primary: var(--ddn-surface);
  --bg-card: var(--ddn-surface);
  --bg-elevated: var(--ddn-surface-2);
  --bg-hover: var(--ddn-surface-3);
  --bg-input: var(--ddn-surface-2);
  --bg-nav: rgba(10, 11, 13, 0.88);
  --text-primary: var(--ddn-fg);
  --text-secondary: var(--ddn-fg-muted);
  --text-tertiary: var(--ddn-fg-dim);
  --text-muted: var(--ddn-fg-faint);
  --brand: var(--ddn-blue);
  --brand-light: #60a5fa;
  --brand-dark: #2563eb;
  --brand-subtle: var(--ddn-blue-soft);
  --color-success: var(--ddn-jade);
  --color-success-subtle: var(--ddn-jade-soft);
  --color-danger: var(--ddn-loss);
  --color-danger-subtle: var(--ddn-loss-soft);
  --color-warning: #f59e0b;
  --color-info: var(--ddn-blue);
  --accent-edge: var(--ddn-gold);
  --border-primary: var(--ddn-border);
  --border-subtle: rgba(255,255,255,0.04);
  --border-hover: var(--ddn-border-hi);
  --font-family: var(--ddn-sans);
  --font-display: var(--ddn-mono);
  --font-mono: var(--ddn-mono);
  --radius-sm: var(--ddn-r-sm);
  --radius-md: var(--ddn-r-md);
  --radius-lg: var(--ddn-r-lg);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ddn-bg); }
::-webkit-scrollbar-thumb { background: var(--ddn-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ddn-border-hi); }

html, body {
  background: var(--ddn-bg);
  color: var(--ddn-fg);
  font-family: var(--ddn-sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ddn-gold);
  color: var(--ddn-gold-ink);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Pick Card ── */
.ddn-pick-card {
  position: relative;
  border-radius: var(--ddn-r-md);
  border: 1px solid var(--ddn-border);
  padding: 20px;
  background: var(--ddn-surface);
  transition: border-color var(--ddn-motion-base), transform var(--ddn-motion-base);
  display: block;
  text-decoration: none;
  color: inherit;
}
.ddn-pick-card:hover {
  border-color: var(--ddn-border-hi);
}
.ddn-pick-lock {
  border-color: var(--ddn-gold-border) !important;
  background: linear-gradient(180deg, var(--ddn-gold-soft) 0%, var(--ddn-surface) 80px);
}
.ddn-pick-lock-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ddn-gold), transparent);
}

/* LOCK breathing glow — makes high-confidence picks feel alive */
@keyframes cyanbreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0), inset 0 0 0 1px rgba(34,211,238,.3); }
  50%      { box-shadow: 0 0 22px 2px rgba(34,211,238,.22), inset 0 0 0 1px rgba(34,211,238,.7); }
}
.ddn-lock { animation: cyanbreathe 4s ease-in-out infinite; }

/* Console line animation for CommandLog */
@keyframes consoleLine {
  from { opacity:0; transform: translateX(-6px); }
  to { opacity:1; transform: none; }
}

/* ── Signal Chips ── */
.ddn-signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--ddn-r-xs);
  font-size: 9px;
  font-weight: 600;
  font-family: var(--ddn-mono);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.ddn-signal-sharp {
  background: var(--ddn-blue-soft);
  color: var(--ddn-blue);
  border: 1px solid var(--ddn-blue-border);
}
.ddn-signal-ev {
  background: var(--ddn-jade-soft);
  color: var(--ddn-jade);
  border: 1px solid var(--ddn-jade-border);
}
.ddn-signal-whale {
  background: var(--ddn-violet-soft);
  color: var(--ddn-violet);
  border: 1px solid rgba(139,92,246,.3);
}

/* ── Tier Badges ── */
.ddn-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--ddn-mono);
  padding: 3px 8px;
  border-radius: var(--ddn-r-xs);
  text-transform: uppercase;
  letter-spacing: 1.3px;
}
.ddn-tier-lean   { background: rgba(161,166,173,.1); color: var(--ddn-fg-muted); border: 1px solid var(--ddn-border); }
.ddn-tier-sharp  { background: var(--ddn-blue-soft); color: var(--ddn-blue); border: 1px solid var(--ddn-blue-border); }
.ddn-tier-strong { background: var(--ddn-jade-soft); color: var(--ddn-jade); border: 1px solid var(--ddn-jade-border); }
.ddn-tier-high   { background: var(--ddn-jade-soft); color: var(--ddn-jade-dark); border: 1px solid var(--ddn-jade-border); }
.ddn-tier-lock   { background: var(--ddn-gold-soft); color: var(--ddn-gold); border: 1px solid var(--ddn-gold-border); box-shadow: 0 0 16px var(--ddn-gold-border); }

/* ── Eyebrow ── */
.ddn-eyebrow {
  font-family: var(--ddn-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ddn-fg-dim);
}

/* ── Badge ── */
.ddn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--ddn-mono);
  padding: 3px 8px;
  border-radius: var(--ddn-r-xs);
  background: rgba(255,255,255,.05);
  color: var(--ddn-fg-muted);
  border: 1px solid var(--ddn-border);
  text-transform: uppercase;
  letter-spacing: 1.3px;
}

/* ── Stat Card ── */
.ddn-stat-card {
  background: var(--ddn-surface);
  border: 1px solid var(--ddn-border);
  border-radius: var(--ddn-r-md);
  padding: 18px;
  transition: border-color var(--ddn-motion-base);
}
.ddn-stat-card:hover {
  border-color: var(--ddn-border-hi);
}

/* ── Button variants ── */
.ddn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ddn-sans);
  font-weight: 600;
  border-radius: var(--ddn-r-sm);
  cursor: pointer;
  transition: all var(--ddn-motion-fast);
  border: 1px solid transparent;
  text-decoration: none;
}
.ddn-btn-gold {
  background: var(--ddn-gold);
  color: var(--ddn-gold-ink);
  border-color: var(--ddn-gold);
  padding: 12px 22px;
  font-size: 14px;
}
.ddn-btn-gold:hover { background: #67e8f9; }
.ddn-btn-ghost {
  background: transparent;
  color: var(--ddn-fg);
  border-color: var(--ddn-border);
  padding: 12px 22px;
  font-size: 14px;
}
.ddn-btn-ghost:hover { border-color: var(--ddn-border-hi); background: rgba(255,255,255,.03); }
.ddn-btn-jade {
  background: var(--ddn-jade);
  color: #052e1f;
  border-color: var(--ddn-jade);
  padding: 9px 16px;
  font-size: 13px;
}

/* ── Confidence Bar ── */
.ddn-conf-bar {
  height: 4px;
  background: var(--ddn-surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.ddn-conf-fill {
  height: 100%;
  transition: width 0.6s ease;
}
.ddn-conf-fill-jade {
  background: linear-gradient(90deg, var(--ddn-jade-dark), var(--ddn-jade));
  box-shadow: 0 0 12px rgba(16,185,129,.4);
}
.ddn-conf-fill-gold {
  background: linear-gradient(90deg, var(--ddn-gold-dark), var(--ddn-gold));
  box-shadow: 0 0 12px rgba(34,211,238,.4);
}

/* ── W/L Result Pill ── */
.ddn-result-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--ddn-r-xs);
  font-family: var(--ddn-mono);
  font-size: 12px;
  font-weight: 700;
}
.ddn-result-w {
  background: var(--ddn-jade-soft);
  color: var(--ddn-jade);
  border: 1px solid var(--ddn-jade-border);
}
.ddn-result-l {
  background: var(--ddn-loss-soft);
  color: var(--ddn-loss);
  border: 1px solid rgba(239,68,68,.3);
}

/* ── Media Card ── */
.ddn-media-card {
  background: var(--ddn-surface);
  border: 1px solid var(--ddn-border);
  border-radius: var(--ddn-r-md);
  padding: 22px 24px;
  display: grid;
  gap: 14px;
  cursor: pointer;
  transition: all var(--ddn-motion-fast);
}
.ddn-media-card:hover {
  border-color: var(--ddn-border-hi);
  background: var(--ddn-surface-2);
}

/* ── Pipeline Step ── */
.ddn-pipeline-step {
  position: relative;
  padding: 14px;
  background: var(--ddn-bg);
  border: 1px solid var(--ddn-border);
  border-radius: var(--ddn-r-sm);
}

/* ── Status Dot ── */
@keyframes ddnPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; }
  50% { opacity: 0.6; box-shadow: 0 0 10px currentColor; }
}
.ddn-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  animation: ddnPulse 2s infinite;
}
.ddn-status-live { background: var(--ddn-jade); color: var(--ddn-jade); }
.ddn-status-stale { background: var(--ddn-gold); color: var(--ddn-gold); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .ddn-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .ddn-pick-grid { grid-template-columns: 1fr !important; }
  .ddn-pipeline-grid { grid-template-columns: 1fr 1fr !important; }
  .ddn-hero-grid { grid-template-columns: 1fr !important; }
  .ddn-media-footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .ddn-stat-grid { grid-template-columns: 1fr !important; }
  .ddn-pipeline-grid { grid-template-columns: 1fr !important; }
}