/* ========== base.css ==========
   Global variables, reset-lite, base typography
================================ */
@import "components.css";
@import "grid-templates.css";
@import "image-container.css";
@import "layout.css";
@import "utilities.css";
@import "pricing.css";
@import "header.css";


:root {
  /* Colors */
  --bg: #171717;
  --text: #ffffff;

  /* Typography */
  --font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-100: 0.875rem;   /* 14px */
  --fs-200: 1rem;
  --fs-300: 1.25rem;
  --fs-400: 2rem;
  --letter-spacing: -0.4pt;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --page-pad: 4rem;
  --page-pad-mobile: 1rem;


  /* Layout */
  --maxw: 1440px;

  /* Images */
  --hero-img: url("/assets/background.jpg");
}

/* Reset-lite */
* { box-sizing: border-box; }
html, body { 
  height: 100%; 
  }

/* Body defaults */
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-300);
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

/* Typography */
h1 {
  font: 300 var(--fs-400)/1.25 var(--font);
  letter-spacing: var(--letter-spacing);
}

h2 {
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 var(--space-2);
  text-align: left;
  letter-spacing: var(--letter-spacing);
}

h3 {
  font-weight: 300;
  font-size: 1.25rem;
  margin: 0 0 var(--space-2);
  text-align: left;
  letter-spacing: var(--letter-spacing);
}

b {
  font-weight: 600;
}

p {
  font-size: var(--fs-100);
  text-align: left;
  font-weight: 100;
  letter-spacing: var(--letter-spacing);
  max-width: 500px;
}

a {
  color: var(--font);
  font-size: var(--fs-100);
  text-align: left;
  font-weight: 100;
  letter-spacing: var(--letter-spacing);
  max-width: 500px;
  text-decoration: underline;
}

ul {
  font-size: var(--fs-100);
  text-align: left;
  font-weight: 100;
  letter-spacing: var(--letter-spacing);
  max-width: 500px;
}

/* temporary: this media text align needs a tidy */
@media (max-width: 768px) {
p  {
  text-align: center;
  } 
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 768px) {
h2 {
  font-size: 1rem;
  text-align: center;
}
}