/* Derivatives Navigator — custom stylesheet */
:root{
  --brand-indigo: #4f46e5;
  --brand-indigo-600: #4f46e5;
  --brand-indigo-700: #4338ca;
  --muted: #6b7280;
  --bg: #f9fafb;
  --card: #ffffff;
  --accent-red: #ef4444;
  --max-width: 72rem;
  --radius-lg: 1rem;
}

/* Basic layout helpers */
.container{
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Typography tweaks */
h1,h2,h3{ color: #111827; }
p, li, span { color: var(--muted); }

/* Buttons */
.btn {
  display:inline-block;
  font-weight:600;
  padding:0.625rem 1rem;
  border-radius:0.5rem;
  text-decoration:none;
  transition:all .15s ease;
}
.btn-primary{
  background: var(--brand-indigo);
  color: white;
  box-shadow: 0 6px 18px rgba(79,70,229,0.12);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79,70,229,0.14); }
.btn-outline{
  background: transparent;
  border: 1px solid var(--brand-indigo-600);
  color: var(--brand-indigo-600);
}

/* Cards */
.card{
  background: var(--card);
  border-radius: 0.75rem;
  padding:1.25rem;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
}

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], textarea {
  border: 1px solid #e5e7eb;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  outline: none;
}
input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(79,70,229,0.06); border-color: var(--brand-indigo-600); }

/* Utilities */
.text-muted { color: var(--muted); }
.kicker { font-weight: 700; color: var(--brand-indigo-700); }

/* Responsive tweaks for containers */
@media (min-width: 768px){
  .grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; }
}

/* Footer */
.footer { background: #0f172a; color: rgba(255,255,255,0.9); padding:2.5rem 0; border-top:1px solid rgba(255,255,255,0.02); }

/* Small helpers */
.small { font-size: 0.875rem; }
.center { text-align:center; }

/* Accessibility: focus outlines */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(79,70,229,0.12); outline-offset: 2px; }

/* Custom OG fallback */
.og-image { background: linear-gradient(135deg,#4f46e5 0%, #06b6d4 100%); color: white; padding:2rem; border-radius:0.75rem; }