/* theme.css — shared design system for the site.
   Dark & refined: deep charcoal, soft white text, one muted indigo accent.
   Matte (no neon glow). Link this BEFORE any page-specific stylesheet. */

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

:root {
  /* Surfaces */
  --bg: #0f1115;
  --bg-elev: #161922;
  --bg-elev-2: #1c2030;

  /* Text */
  --text: #e6e8eb;
  --text-muted: #9aa1ad;
  --text-faint: #6b7280;

  /* Lines + accent */
  --border: #232733;
  --border-strong: #2e3342;
  --accent: #7aa2f7;
  --accent-hover: #9bb8fa;
  --accent-soft: rgba(122, 162, 247, 0.12);
  --danger: #f0768b;

  /* Shape + depth */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 220ms;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

a:hover {
  color: var(--accent-hover);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

::selection {
  background: var(--accent-soft);
}

/* Reusable buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: background var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.btn:hover {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  color: var(--text);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c0f16;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #0c0f16;
}

/* Scroll reveal ----------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}