@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap");

:root {
  --font: "Sora", system-ui, sans-serif;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-text: #1c1917;
  --bg: #0e0e11;
  --bg-surface: #18181b;
  --text: #e4e4e7;
  --text-muted: #71717a;
  --border: #27272a;
  --radius: 0.75rem;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --heading-weight: 600;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
}

body {
  background:
    radial-gradient(ellipse at 50% -5%, rgba(245, 158, 11, 0.04) 0%, transparent 50%),
    var(--bg);
}

nav a strong {
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

nav {
  font-size: 0.95rem;
}

nav a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
}

nav a:hover {
  color: var(--text) !important;
}

nav ul {
  gap: 1rem !important;
}

code {
  color: var(--accent);
  background: rgba(245, 158, 11, 0.08);
}

article:hover {
  border-color: rgba(245, 158, 11, 0.35);
}

/* Login/register card centered */
article[style*="max-width"] {
  border-color: rgba(245, 158, 11, 0.15);
}

button:hover, [role="button"]:hover {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.12);
}