/* 
 * BASE STYLES
 * CSS variables, resets, and typography
 */

:root {
  /* Main theme variables */
  --text: #e8ebf4;
  --brand: #890000;
  --brand-2: #FF7700;
  --brand-background: #000000;
  --radius: 16px;
  --font-heading: var(--theme-a-font-heading); /* default = Flame theme */
  --font-weight-heading: var(--theme-a-font-weight-heading);

  /* Theme A Flame presets (default) */
  --theme-a-text: #e8ebf4;
  --theme-a1: #890000;
  --theme-a2: #FF7700;
  --theme-a-background: #000000;
  --theme-a-font-heading: 'Potta One', serif;
  --theme-a-font-weight-heading: 400;

  /* Theme B Neon presets */
  --theme-b-text: #e8ebf4;
  --theme-b1: #2f09ee;
  --theme-b2: #ff00ea;
  --theme-b-background: #000000;
  --theme-b-font-heading: 'Monoton', sans-serif;
  --theme-b-font-weight-heading: 400;

  /* Theme C Space presets */
  --theme-c-text: #e8ebf4;
  --theme-c1: #270155;
  --theme-c2: #7200ff;
  --theme-c-background: #000000;
  --theme-c-font-heading: 'Exo 2', sans-serif;
  --theme-c-font-weight-heading: 800;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background-color: var(--brand-background);
  background-image: url('../img/background.png');
  background-attachment: fixed;
  background-size: auto;
  background-blend-mode: luminosity;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  transition: font-family .2s ease, font-weight .2s ease;
}

/* Common utilities */
.section {
  padding: 3.5rem 0;
  text-align: center;
  background: transparent;
  margin: 1rem 0;
}

.container {
  width: min(1100px, 92vw);
  margin: auto;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color .3s ease, transform .3s ease;
}

a:hover {
  color: var(--brand);
  transform: translateY(-2px);
}