/* ============================================================
   Code DR AI — Site styles
   Extends TileStudio tokens with a dark "diagnostic" theme
   ============================================================ */

/* ── Brand palette extensions ─────────────────────────────── */
:root {
  /* Primary indigo from TS */
  --vc-primary:       hsl(239 84% 67%);  /* #5B6CF9 */
  --vc-primary-hov:   hsl(239 84% 62%);
  --vc-primary-10:    hsl(239 84% 67% / 0.10);
  --vc-primary-20:    hsl(239 84% 67% / 0.20);

  /* Neon-purple accent (from brand image) */
  --vc-purple:        hsl(265 89% 70%);  /* #A78BFA-ish */
  --vc-purple-deep:   hsl(260 60% 50%);
  --vc-purple-glow:   hsl(265 89% 70% / 0.5);

  /* Cyan ECG accent */
  --vc-cyan:          hsl(190 95% 62%);  /* #3FD8F7 */
  --vc-cyan-glow:     hsl(190 95% 62% / 0.5);

  /* Mint "healthy" / success */
  --vc-mint:          hsl(152 70% 55%);
  --vc-amber:         hsl(38 92% 56%);
  --vc-red:           hsl(0 85% 62%);

  /* Light theme defaults (overridden by data-theme) */
  --vc-bg:            #FFFFFF;
  --vc-bg-soft:       #F8FAFC;
  --vc-bg-elevated:   #FFFFFF;
  --vc-fg:            #0F172A;
  --vc-fg-soft:       #475569;
  --vc-fg-muted:      #64748B;
  --vc-border:        #E2E8F0;
  --vc-border-soft:   #EFF2F7;
  --vc-overlay:       rgba(15, 23, 42, 0.06);

  /* Terminal (always dark-ish regardless of theme) */
  --vc-term-bg:       #0A0B14;
  --vc-term-surface:  #12142A;
  --vc-term-border:   hsl(260 50% 30% / 0.45);
  --vc-term-dim:      #8A8FB5;
  --vc-term-fg:       #E6E9FF;
}

/* Dark theme */
[data-theme="dark"] {
  --vc-bg:            #070815;
  --vc-bg-soft:       #0C0E22;
  --vc-bg-elevated:   #121532;
  --vc-fg:            #F2F3FF;
  --vc-fg-soft:       #BEC1D8;
  --vc-fg-muted:      #8A8FB5;
  --vc-border:        hsl(250 30% 22%);
  --vc-border-soft:   hsl(250 30% 16%);
  --vc-overlay:       rgba(167, 139, 250, 0.08);
}

/* Hybrid: dark hero + light content */
[data-theme="hybrid"] {
  --vc-bg:            #FFFFFF;
  --vc-bg-soft:       #F8FAFC;
  --vc-bg-elevated:   #FFFFFF;
  --vc-fg:            #0F172A;
  --vc-fg-soft:       #475569;
  --vc-fg-muted:      #64748B;
  --vc-border:        #E2E8F0;
  --vc-border-soft:   #EFF2F7;
  --vc-overlay:       rgba(15, 23, 42, 0.06);
}

/* ── Reset / base ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html[data-theme], html[data-theme] body {
  background: var(--vc-bg) !important;
  color: var(--vc-fg) !important;
  transition: background 0.3s ease, color 0.3s ease;
}
img[src$="codedr-icon.png"] {
  background: transparent;
  border-radius: 0;
}
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* ── Utilities ────────────────────────────────────────────── */
.vc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.vc-container-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}
.vc-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vc-primary);
  margin: 0;
}
.vc-section {
  padding: 96px 0;
  position: relative;
}
.vc-section-tight {
  padding: 56px 0;
}
.vc-h-hero {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.vc-h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.vc-h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.vc-body {
  color: var(--vc-fg-muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}
.vc-body-sm {
  color: var(--vc-fg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.vc-mono {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-variant-ligatures: none;
}

/* ── Buttons ──────────────────────────────────────────────── */
.vc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.vc-btn-primary {
  background: var(--vc-primary);
  color: #fff;
  box-shadow: 0 10px 30px -12px var(--vc-primary), inset 0 1px 0 rgba(255,255,255,.15);
}
.vc-btn-primary:hover {
  background: var(--vc-primary-hov);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -14px var(--vc-primary);
}
.vc-btn-ghost {
  background: transparent;
  color: var(--vc-fg);
  border: 1px solid var(--vc-border);
}
.vc-btn-ghost:hover {
  border-color: var(--vc-primary);
  color: var(--vc-primary);
}
.vc-btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}
.vc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ── Forms ────────────────────────────────────────────────── */
.vc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vc-field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--vc-fg);
}
.vc-field > small {
  font-size: 12px;
  color: var(--vc-fg-muted);
  line-height: 1.45;
}
.vc-input,
.vc-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--vc-border);
  background: var(--vc-bg);
  color: var(--vc-fg);
  font: inherit;
  font-size: 15px;
}
.vc-textarea {
  min-height: 110px;
  resize: vertical;
}
.vc-input:focus,
.vc-textarea:focus {
  outline: none;
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 3px var(--vc-primary-10);
}
.vc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Pills ────────────────────────────────────────────────── */
.vc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--vc-border);
  background: var(--vc-bg-soft);
  color: var(--vc-fg-muted);
}
.vc-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vc-mint);
  box-shadow: 0 0 0 3px hsl(152 70% 55% / 0.2);
  animation: vc-pulse-dot 2s ease-in-out infinite;
}
@keyframes vc-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Cards ────────────────────────────────────────────────── */
.vc-card {
  background: var(--vc-bg-elevated);
  border: 1px solid var(--vc-border);
  border-radius: 14px;
  padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.vc-card:hover {
  border-color: var(--vc-primary-20);
}

/* ── Global animations ────────────────────────────────────── */
@keyframes vc-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vc-pulse-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

/* ── Section dividers ─────────────────────────────────────── */
.vc-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--vc-border), transparent);
  max-width: 600px;
  margin: 0 auto;
}

/* ── Scrollbar (dark only) ────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0C0E22; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A2E50; border-radius: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A3F6E; }