@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --bg:#0B0F1A;
    --surface-1:#0F1629;
    --surface-2:#121A33;
    --surface-3:#15203F;
    --text:#E6EAF2;
    --text-muted:#9AA4B2;
    --border:#223055;
    --primary:#60A5FA;
    --primary-foreground:#0B1220;
    --secondary:#94A3B8;
    --secondary-foreground:#0B1220;
    --accent:#22D3EE;
    --accent-foreground:#0B1220;
    --success:#34D399;
    --success-foreground:#072016;
    --warning:#FBBF24;
    --warning-foreground:#1F1600;
    --danger:#F87171;
    --danger-foreground:#2A0B0B;
  }
  .dark {
    --bg:#0B0F1A; /* default */
  }
}

.nav-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem;
  border:1px solid var(--border);
  border-radius:0.375rem;
  background:transparent;
  color:inherit;
  transition:background-color 150ms ease, border-color 150ms ease;
}

.nav-toggle:hover {
  background-color:rgba(99,102,241,0.08);
  border-color:var(--primary);
}

.nav-toggle:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
}

#navbarSupportedContent {
  width:100%;
}

@media (min-width: 768px) {
  #navbarSupportedContent {
    width:auto;
  }
}

.nav-links {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.nav-links a {
  color:var(--text-muted);
  transition:color 150ms ease;
}

.nav-links a:hover {
  color:var(--text);
}

@media (min-width: 768px) {
  .nav-links {
    flex-direction:row;
    align-items:center;
    gap:1rem;
  }
}