/* ============================================
   BASE STYLES - Reset, variables, typography
   ============================================ */

:root {
  /* Color palette */
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --secondary-color: #334155;

  /* Back-compat tokens used by some component/page styles */
  --primary-dark: var(--primary-hover);
  --text: var(--text-dark);
  --muted: var(--text-medium);
  --text-base: var(--text-medium);

  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-gray: #f1f5f9;

  --text-dark: #0f172a;
  --text-medium: #475569;
  --text-light: #f8fafc;

  /* Borders & shadows */
  --border-color: #e2e8f0;
  --border-radius: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.16);

  /* Layout */
  --container-max-width: 1100px;

  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Focus + elevated surfaces */
  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-glass-border: rgba(148, 163, 184, 0.35);
}

/* Modern-ish reset */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  color: var(--text-dark);

  /* Subtle tech-forward gradient, keeps pages feeling "professional" without being loud */
  background:
    radial-gradient(1200px circle at 12% 0%, rgba(37, 99, 235, 0.10), transparent 55%),
    radial-gradient(900px circle at 88% 18%, rgba(14, 165, 233, 0.08), transparent 55%),
    var(--bg-light);

  /* Prevent tiling on long pages */
  background-repeat: no-repeat;
  background-size: 1400px 1400px, 1100px 1100px, auto;
  background-position: 12% 0%, 88% 18%, 0 0;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  /* Fixed backgrounds can be janky on mobile Safari */
  body {
    background-attachment: scroll;
  }
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* Consistent muted helper (used by multiple pages + JS renderers) */
.muted {
  color: var(--text-medium);
}

/* Accessible focus styles */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 10px;
}

::selection {
  background: rgba(37, 99, 235, 0.18);
}

/* Subtle page entrance used on detail pages */
@keyframes page-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0 0 var(--spacing-md) 0; }
p { margin: 0 0 var(--spacing-md) 0; color: var(--text-medium); }

/* Utility states used throughout pages */
.loading-container,
.error-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.error-container {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

/* Make sure pages can push footer down */
body {
  display: flex;
  flex-direction: column;
}

main { flex: 1; }