/* Custom styles to complement Tailwind */
:root {
  --ring: rgba(255,255,255,0.08);
  /* Brand palette (defaults to indigo) */
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system; }

.hero-blob {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 520px;
  background: radial-gradient(600px 300px at 20% 40%, rgba(99,102,241,0.15), transparent 60%),
              radial-gradient(500px 260px at 80% 30%, rgba(168,85,247,0.12), transparent 60%),
              radial-gradient(700px 360px at 50% 80%, rgba(56,189,248,0.10), transparent 60%);
  filter: blur(28px);
  pointer-events: none;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--brand-600);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(31, 41, 55, 0.3), 0 4px 6px -4px rgba(31, 41, 55, 0.3);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background-color 150ms, box-shadow 150ms, transform 150ms;
}
.btn-primary:hover { background-color: var(--brand-500); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.05);
  color: #e2e8f0; /* slate-100 */
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  transition: background-color 150ms;
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }

.section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }
.section-inner { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .section-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .section-inner { padding-left: 2rem; padding-right: 2rem; } }
.section-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2rem; }
@media (min-width: 640px) { .section-title { font-size: 1.875rem; } }

.card { border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(15,23,42,0.6); padding: 1rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.card-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem; }
.card-text { color: #cbd5e1; font-size: 0.875rem; }

.tile { border-radius: 0.75rem; padding: 1.5rem; background: linear-gradient(to bottom right, rgba(15,23,42,1), rgba(15,23,42,0.6)); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.tile-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }

.info { padding: 1.25rem; border-radius: 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.info-title { font-weight: 600; margin-bottom: 0.25rem; }

.input { width: 100%; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(15,23,42,0.6); padding: 0.5rem 0.75rem; color: #f1f5f9; outline: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.input::placeholder { color: #94a3b8; }
.input:focus { box-shadow: 0 0 0 2px rgba(99,102,241,0.6); }
.label { display: block; font-size: 0.875rem; font-weight: 500; color: #cbd5e1; margin-bottom: 0.5rem; }
.hint { margin-top: 0.5rem; font-size: 0.75rem; color: #94a3b8; }

.demo { border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(15,23,42,0.4); padding: 1.5rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.demo-header { margin-bottom: 1rem; }
.demo-title { font-size: 1.25rem; font-weight: 600; }
.demo-sub { color: #cbd5e1; font-size: 0.875rem; }

/* Theme controls */
.theme-controls { display: flex; align-items: center; gap: 0.5rem; }
.theme-input { width: 16rem; }
.theme-swatch { width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; cursor: pointer; }
.theme-swatch[data-theme="indigo"] { background: linear-gradient(135deg, #818cf8, #4338ca); }
.theme-swatch[data-theme="emerald"] { background: linear-gradient(135deg, #34d399, #065f46); }
.theme-swatch[data-theme="rose"] { background: linear-gradient(135deg, #fb7185, #9f1239); }

/* Reductions gallery */
.reduction-tabs { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.reduction-tab { padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgba(255,255,255,0.05); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; }
.reduction-tab.active { background: rgba(99,102,241,0.20); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; }
.reduction-panels { margin-top: 0.5rem; }
.reduction-panel { display: none; }
.reduction-panel.active { display: block; }

.panel { border-radius: 0.75rem; background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.1); padding: 1rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; min-height: 120px; }
.panel-header { font-size: 0.875rem; color: #cbd5e1; margin-bottom: 0.5rem; }

.gc-canvas { height: 260px; position: relative; overflow: hidden; }
.gc-node { position: absolute; width: 28px; height: 28px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #0f172a; cursor: pointer; -webkit-user-select: none; user-select: none; }
.gc-node.gc-c0 { background: #60a5fa; }
.gc-node.gc-c1 { background: #34d399; }
.gc-node.gc-c2 { background: #f87171; }

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.875rem;
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 150ms, color 150ms, box-shadow 150ms;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
.toggle[data-on="true"] {
  background: rgba(99,102,241,0.20);
  color: white;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}