/* ═══════════════════════════════════════════════
   COMPOUND PROTOCOL — Design Tokens
   Edit this file to retheme the entire site.
   Light mode = :root   Dark mode = html.dark
   ═══════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg:          #F7F8FA;
  --bg-soft:     #F0F2F5;
  --surface:     #FFFFFF;
  --border:      #E8ECF1;

  /* Text */
  --text-primary:   #1A1D26;
  --text-secondary: #5A6170;
  --text-muted:     #8B92A0;

  /* Brand */
  --accent:       #2563EB;
  --accent-dark:  #1D4ED8;
  --accent-light: #EFF6FF;
  --accent-glow:  rgba(37,99,235,0.08);

  /* Semantic colours */
  --teal:           #0D9488;
  --teal-light:     #F0FDFA;
  --amber:          #D97706;
  --amber-light:    #FFFBEB;
  --rose:           #E11D48;
  --rose-light:     #FFF1F2;
  --violet:         #7C3AED;
  --violet-light:   #F5F3FF;
  --emerald:        #059669;
  --emerald-light:  #ECFDF5;
  --indigo:         #4338CA;
  --indigo-light:   #EEF2FF;
  --green:          #4caf50;
  --green-light:    #e8f5e9;
  --green-dark:     #2e7d32;

  /* Fixed dark (used in hero sections regardless of theme) */
  --navy:  #0F172A;
  --slate: #334155;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);

  /* Radius */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
}

/* ── Dark mode overrides ── */
html.dark {
  --bg:          #0F172A;
  --bg-soft:     #1A2540;
  --surface:     #1E293B;
  --border:      rgba(255,255,255,0.08);

  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #475569;

  --accent:       #3B82F6;
  --accent-dark:  #2563EB;
  --accent-light: rgba(59,130,246,0.12);
  --accent-glow:  rgba(59,130,246,0.08);

  --emerald-light: rgba(5,150,105,0.15);
  --violet-light:  rgba(124,58,237,0.15);
  --teal-light:    rgba(13,148,136,0.15);
  --amber-light:   rgba(217,119,6,0.15);
  --rose-light:    rgba(225,29,72,0.15);
  --indigo-light:  rgba(67,56,202,0.15);
  --green-light:   rgba(76,175,80,0.12);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
}

/* ── Site nav ── */
#cp-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.2s;
}
html.dark #cp-nav {
  background: rgba(15,23,42,0.92);
}
.cp-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.cp-nav-brand {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.cp-nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.cp-nav-links::-webkit-scrollbar { display: none; }
.cp-nav-links a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s;
}
.cp-nav-links a:hover {
  color: var(--text-primary);
  background: var(--bg-soft);
}
.cp-nav-links a.active {
  color: var(--accent);
  background: var(--accent-light);
}
#cp-dark-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
#cp-dark-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}
#cp-dark-btn svg { display: block; }

/* Base body reset (applied to all pages) */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}