@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@100..900&display=swap");

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Hanken Grotesk", sans-serif;
  line-height: 1.6;
  color: var(--text-primary); /* Updated to use new theme variable */
  background-color: var(--background-primary); /* Updated to use new theme variable */
  overflow-x: hidden; /* Prevent horizontal scroll often caused by animations */
}

/* Monochromatic Light Theme Color Palette */
:root {
  --background-light-primary: #FFFFFF; /* White */
  --background-light-secondary: #F5F5F5; /* Very Light Grey */
  --background-light-tertiary: #EAEAEA; /* Light Grey */
  --text-dark-primary: #212121;      /* Near Black */
  --text-dark-secondary: #555555;    /* Dark Grey */
  --accent-mono-primary: #333333;    /* Dark Grey for accents (e.g. button text on white bg) */
  --accent-mono-primary-hover: #555555; /* Slightly Lighter Grey for hover */
  --accent-mono-background: #FFFFFF; /* White for button backgrounds */
  --accent-mono-background-hover: #F0F0F0; /* Off-white for button hover */
  --hero-text-color: #FFFFFF; /* White for hero text */


  /* Aliases for current theme (Monochromatic Light) */
  --background-primary: var(--background-light-primary);
  --background-secondary: var(--background-light-secondary);
  --background-tertiary: var(--background-light-tertiary);
  --text-primary: var(--text-dark-primary);
  --text-secondary: var(--text-dark-secondary);
  --accent-primary: var(--accent-mono-primary); /* Dark Grey text for accents */
  --accent-primary-hover: var(--accent-mono-primary-hover);
  --accent-background: var(--accent-mono-background); /* White background for accents */
  --accent-background-hover: var(--accent-mono-background-hover);


  /* Old variable names aliased or to be replaced if they were used directly elsewhere */
  --primary-color: var(--accent-primary); /* Now dark grey text */
  --secondary-color: var(--text-secondary);
  --text-color: var(--text-primary);
  --light-text-color: var(--hero-text-color); /* Hero text is white */
  --dark-background-color: var(--background-primary); /* This is for hero bg, still white */

  --container-width: 1100px;
  --header-height: 60px; /* Added header height */
}

/* Utility Classes */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Main Content Area */
main {
  padding-top: 0; /* Remove padding, transparent header overlays content */
}

/* General Section Styling */
section {
  padding: 60px 0;
  overflow: hidden;
}

section h2 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 40px;
  color: var(--text-primary); /* Updated to use new theme variable */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  main {
    padding-top: 0;
  }

  section h2 {
    font-size: 2em;
  }
}