/* ============================================================
   Signal Market — Design System
   Intelligence Infrastructure for the AI Frontier
   Version: 1.0 | 2026-03-12
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  /* Background */
  --bg-deep:      #080C14;
  --bg-surface:   #0D1117;
  --bg-card:      #161B22;
  --bg-hover:     #1C2333;
  --bg-input:     #161B22;

  /* Brand */
  --brand:        #2D7DD2;
  --brand-dim:    #1A4A8A;
  --brand-bright: #4D9FFF;
  --brand-glow:   rgba(45, 125, 210, 0.15);
  --brand-glow-md: rgba(45, 125, 210, 0.25);

  /* Signal lifecycle colors */
  --stage-weak:         #374151;
  --stage-weak-text:    #6B7280;
  --stage-emerging:     #78350F;
  --stage-emerging-text:#F59E0B;
  --stage-forming:      #1E3A5F;
  --stage-forming-text: #60A5FA;
  --stage-accel:        #064E3B;
  --stage-accel-text:   #10B981;
  --stage-peak:         #4C1D95;
  --stage-peak-text:    #A78BFA;
  --stage-fading:       #1F2937;
  --stage-fading-text:  #9CA3AF;
  --stage-dead:         #111827;
  --stage-dead-text:    #4B5563;

  /* Text */
  --text-primary:   #E6EDF3;
  --text-secondary: #8B949E;
  --text-muted:     #484F58;
  --text-invert:    #080C14;

  /* Borders */
  --border:         #30363D;
  --border-dim:     #21262D;
  --border-brand:   rgba(45, 125, 210, 0.4);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace;

  /* Type scale */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5625rem;  /* 25px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.75rem;    /* 44px */
  --text-5xl:  3.5rem;     /* 56px */
  --text-6xl:  4.5rem;     /* 72px */

  /* Spacing */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-brand: 0 0 24px rgba(45,125,210,0.2);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  --shadow-glow:  0 0 40px rgba(45,125,210,0.12);

  /* Transitions */
  --ease-fast: 120ms ease;
  --ease-mid:  220ms cubic-bezier(0.32,0,0.67,0);
  --ease-slow: 400ms cubic-bezier(0.16,1,0.3,1);

  /* Layout */
  --max-width: 1200px;
  --nav-height: 60px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
h1 { font-size: clamp(2.25rem, 5vw, var(--text-6xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--text-4xl)); letter-spacing: -0.025em; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-weight: 600; }

p { color: var(--text-secondary); line-height: 1.75; }
a { color: var(--brand); text-decoration: none; transition: color var(--ease-fast); }
a:hover { color: var(--brand-bright); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ── Layout Utilities ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
@media (max-width: 640px) { .container { padding-inline: var(--sp-4); } }

.section { padding-block: var(--sp-24); }
.section-sm { padding-block: var(--sp-16); }

/* ── Navigation ─────────────────────────────────────────────── */
.sm-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding-inline: var(--sp-6);
  border-bottom: 1px solid transparent;
  transition: background var(--ease-slow), border-color var(--ease-slow), backdrop-filter var(--ease-slow);
}
.sm-nav.scrolled {
  background: rgba(8,12,20,0.85);
  backdrop-filter: blur(16px);
  border-color: var(--border-dim);
}
.sm-nav-inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.sm-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.sm-logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 8px var(--brand); opacity: 1; }
  50%       { box-shadow: 0 0 16px var(--brand-bright); opacity: 0.8; }
}
.sm-nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-4);
  flex: 1;
}
.sm-nav-link {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--ease-fast), background var(--ease-fast);
}
.sm-nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.sm-nav-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.sm-nav-signin {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  transition: color var(--ease-fast);
}
.sm-nav-signin:hover { color: var(--text-primary); }
@media (max-width: 768px) {
  .sm-nav-links { display: none; }
  .sm-nav-signin { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--ease-fast);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 20px rgba(45,125,210,0.3);
}
.btn-primary:hover {
  background: var(--brand-bright);
  color: #fff;
  box-shadow: 0 0 28px rgba(45,125,210,0.45);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--border-brand);
  background: var(--brand-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding-inline: var(--sp-4);
}
.btn-ghost:hover { color: var(--text-primary); }

/* ── Stage Badge ────────────────────────────────────────────── */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stage-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.stage-weak      { background: var(--stage-weak);     color: var(--stage-weak-text); }
.stage-emerging  { background: var(--stage-emerging);  color: var(--stage-emerging-text); }
.stage-forming   { background: var(--stage-forming);   color: var(--stage-forming-text); }
.stage-accelerating { background: var(--stage-accel);  color: var(--stage-accel-text); }
.stage-peak      { background: var(--stage-peak);      color: var(--stage-peak-text); }
.stage-fading    { background: var(--stage-fading);    color: var(--stage-fading-text); }
.stage-dead      { background: var(--stage-dead);      color: var(--stage-dead-text); }

/* ── Signal Card ────────────────────────────────────────────── */
.signal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast), transform var(--ease-fast);
  position: relative;
  overflow: hidden;
}
.signal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-glow);
  opacity: 0;
  transition: opacity var(--ease-fast);
  pointer-events: none;
}
.signal-card:hover {
  border-color: var(--border-brand);
  transform: translateY(-2px);
}
.signal-card:hover::before { opacity: 1; }

.signal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.signal-topic {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.signal-conf-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.conf-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 76px;
}
.conf-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.conf-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--brand);
  transition: width 0.6s var(--ease-slow);
}
.conf-value {
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}
.signal-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.signal-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.signal-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.source-chip {
  padding: 2px var(--sp-2);
  background: var(--bg-hover);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* ── Code Block ─────────────────────────────────────────────── */
.code-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  overflow-x: auto;
}
.code-block pre {
  color: var(--text-primary);
  line-height: 1.8;
  white-space: pre;
  font-size: var(--text-sm);
}
.code-comment { color: var(--text-muted); }
.code-key     { color: #79C0FF; }
.code-string  { color: #A5D6FF; }
.code-number  { color: #F2CC60; }
.code-method  { color: #D2A8FF; }

/* ── Section Headers ────────────────────────────────────────── */
.section-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
.section-title {
  font-size: clamp(1.75rem, 3vw, var(--text-4xl));
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}
.section-sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 60ch;
  line-height: 1.75;
}

/* ── Live Indicator ─────────────────────────────────────────── */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stage-accel-text);
}
.live-dot::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-accel-text);
  animation: livepulse 1.8s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── Divider ────────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin-block: var(--sp-1);
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Utilities ──────────────────────────────────────────────── */
.text-brand    { color: var(--brand); }
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.font-mono     { font-family: var(--font-mono); }
.font-bold     { font-weight: 700; }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.sr-only       { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }