:root {
  /* PRIMARY COLORS */
  --color-primary: #1b263b; /* Navy Blue - Base */
  --color-primary-dark: #0f172a; /* Darker Shade */
  --color-primary-black: #0f1021; /* Darkest Shade */
  --color-primary-light: #2e3b57; /* Lighter Tint */

  /* ACCENT COLORS */
  --color-accent-teal: #2ec4b6; /* Teal */
  --color-accent-teal-light: #4fd3c8;
  --color-accent-teal-dark: #1b9e92;

  --color-accent-gold: #d4af37; /* Gold */
  --color-accent-gold-light: #e7c963;
  --color-accent-gold-dark: #b08922;

  --color-success-green: #28a745; /* Growth Green */
  --color-success-green-light: #45c161;
  --color-success-green-dark: #1f7a35;

  /* GRAYS & BACKGROUND */
  --color-background: #f5f7fa; /* Light Gray Background */
  --color-surface: #ffffff; /* White Surface */
  --color-border: #e0e0e0; /* Light Border */
  --color-text-dark: #1b1b1b; /* Primary Text */
  --color-text-light: #4a4a4a; /* Secondary Text */
  --color-text-white: #fff;
  --color-text-blue: #ccc;
  /* --color-text-blue: #a0aec0; */

  /* FONT FAMILIES */
  --font-sans: "Poppins", "Segoe UI", Tahoma, Geneva, sans-serif;
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
}

* {
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-primary-black);
  color: var(--color-text-dark);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  color: var(--color-primary);
}