/* Earpedia root foundation styles */

/* ================== Variables ================== */
:root {
  --color-black: black;
  --color-blue-overlay: rgba(0, 75, 148, 0.42);
  --color-dark-gray-1: #111111;
  --color-dark-gray-2: #222222;
  --color-dark-gray-3: #242424;
  --color-dark-blue: #202555;
  --color-teal: #276b61;
  --color-purple-gray: #474d77;
  --color-gray-1: #707070;
  --color-gray-2: #757575;
  --color-mint: #7bcec2;
  --color-gray-3: #999999;
  --color-light-gray-1: #d8d8d8;
  --color-light-blue: #e9eef6;
  --color-light-gray-2: #eeeeee;
  --color-light-gray-3: #efefef;
  --color-white: white;
  --color-white-overlay: rgba(255, 255, 255, 0.61);
}

/* ================== Resets & Typography ================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--color-gray-2);
}

/* ================== Layouts ================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Section container base styles */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* For sections that need flex layout */
.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}