/* RobotStonks Custom Styles */

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Custom component classes */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: rgb(23 23 23);
  background-color: rgb(34 211 238);
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: rgb(165 243 252);
}

.btn-primary:active {
  background-color: rgb(34 211 238);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgb(229 229 229);
  padding: 0.625rem 1rem;
  border: 1px solid rgb(64 64 64);
  border-radius: 0.375rem;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-secondary:hover {
  color: white;
  border-color: rgb(82 82 82);
}

.card {
  border-radius: 0.75rem;
  border: 1px solid rgb(64 64 64);
  background-color: rgb(23 23 23);
  padding: 1.5rem;
}

.section {
  border-top: 1px solid rgba(23, 23, 23, 0.6);
}

/* Utility classes */
.text-gradient {
  background: linear-gradient(to right, rgb(34 211 238), rgb(16 185 129));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-radial-cyan {
  background: radial-gradient(1000px 500px at 20% 0%, rgba(14,165,233,0.15), transparent);
}

.bg-radial-emerald {
  background: radial-gradient(800px 400px at 80% 20%, rgba(16,185,129,0.12), transparent);
}