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

:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --bg:           #0f1419;
  --surface:      #191d26;
  --text:         #e8eaed;
  --heading:      #ffffff;
  --muted:        #9ca3af;
  --border:       #2d3748;
  --accent:       #00d4ff;
  --accent-hover: #00b8d4;
  --accent-soft:  rgba(0, 212, 255, 0.15);
}

/* dark-cinema theme: enhanced contrast and glowing accents */
body {
  color: var(--text);
  background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-family: var(--font-display);
}

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

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

/* Subtle glow for accent elements in cinema theme */
button, [role="button"] {
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

button:hover, [role="button"]:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* Increase border contrast for better visibility */
input, textarea, select {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

code {
  background-color: var(--surface);
  color: var(--accent);
  font-family: 'Courier New', monospace;
}