/* https://www.realtimecolors.com/?colors=0b0704-ffece0-f87325-d7d393-cdcd7a&fonts=Molengo-Molengo */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root[data-theme="light"] {
  --text-50: #f8f1ec;
  --text-100: #f1e4da;
  --text-200: #e4c9b4;
  --text-300: #d6ae8f;
  --text-400: #c99369;
  --text-500: #bb7844;
  --text-600: #966036;
  --text-700: #704829;
  --text-800: #4b301b;
  --text-900: #25180e;
  --text-950: #130c07;

  --background-50: #ffefe5;
  --background-100: #ffe0cc;
  --background-200: #ffc099;
  --background-300: #ffa166;
  --background-400: #ff8133;
  --background-500: #ff6200;
  --background-600: #cc4e00;
  --background-700: #993b00;
  --background-800: #662700;
  --background-900: #331400;
  --background-950: #1a0a00;

  --primary-50: #feefe6;
  --primary-100: #fddfce;
  --primary-200: #fcbf9c;
  --primary-300: #fa9f6b;
  --primary-400: #f97f39;
  --primary-500: #f76008;
  --primary-600: #c64c06;
  --primary-700: #943905;
  --primary-800: #632603;
  --primary-900: #311302;
  --primary-950: #190a01;

  --secondary-50: #f8f7ec;
  --secondary-100: #f1f0da;
  --secondary-200: #e3e0b5;
  --secondary-300: #d6d18f;
  --secondary-400: #c8c26a;
  --secondary-500: #bab245;
  --secondary-600: #958f37;
  --secondary-700: #706b29;
  --secondary-800: #4a471c;
  --secondary-900: #25240e;
  --secondary-950: #131207;

  --accent-50: #f8f8ed;
  --accent-100: #f1f1da;
  --accent-200: #e3e3b5;
  --accent-300: #d5d590;
  --accent-400: #c7c76b;
  --accent-500: #b9b946;
  --accent-600: #949438;
  --accent-700: #6f6f2a;
  --accent-800: #4a4a1c;
  --accent-900: #25250e;
  --accent-950: #121207;
}

:root[data-theme="dark"] {
  --text-50: #130c07;
  --text-100: #25180e;
  --text-200: #4b301b;
  --text-300: #704829;
  --text-400: #966036;
  --text-500: #bb7844;
  --text-600: #c99369;
  --text-700: #d6ae8f;
  --text-800: #e4c9b4;
  --text-900: #f1e4da;
  --text-950: #f8f1ec;

  --background-50: #1a0a00;
  --background-100: #331400;
  --background-200: #662700;
  --background-300: #993b00;
  --background-400: #cc4e00;
  --background-500: #ff6200;
  --background-600: #ff8133;
  --background-700: #ffa166;
  --background-800: #ffc099;
  --background-900: #ffe0cc;
  --background-950: #ffefe5;

  --primary-50: #190a01;
  --primary-100: #311302;
  --primary-200: #632603;
  --primary-300: #943905;
  --primary-400: #c64c06;
  --primary-500: #f76008;
  --primary-600: #f97f39;
  --primary-700: #fa9f6b;
  --primary-800: #fcbf9c;
  --primary-900: #fddfce;
  --primary-950: #feefe6;

  --secondary-50: #131207;
  --secondary-100: #25240e;
  --secondary-200: #4a471c;
  --secondary-300: #706b29;
  --secondary-400: #958f37;
  --secondary-500: #bab245;
  --secondary-600: #c8c26a;
  --secondary-700: #d6d18f;
  --secondary-800: #e3e0b5;
  --secondary-900: #f1f0da;
  --secondary-950: #f8f7ec;

  --accent-50: #121207;
  --accent-100: #25250e;
  --accent-200: #4a4a1c;
  --accent-300: #6f6f2a;
  --accent-400: #949438;
  --accent-500: #b9b946;
  --accent-600: #c7c76b;
  --accent-700: #d5d590;
  --accent-800: #e3e3b5;
  --accent-900: #f1f1da;
  --accent-950: #f8f8ed;
}

/* ===== FONTS ===== */
@import url("https://fonts.googleapis.com/css2?family=Molengo:wght@400;500;600;700&display=swap");

/* ===== BASE STYLES ===== */
html {
  font-size: 100%; /* 16px */
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  line-height: 1.6;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background-50);
  color: var(--text-900);
  box-sizing: border-box;
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5 {
  font-family: "Molengo", serif;
  color: var(--primary-500);
}

h1 {
  font-size: 2rem; /* 32px */
  font-weight: 700;
}

h2 {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
}

h3 {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
}

h4 {
  font-size: 1.1rem; /* 17.6px */
  font-weight: 400;
}

h5 {
  font-size: 1rem; /* 16px */
  font-weight: 400;
}

p {
  font-size: 1rem; /* 16px */
  font-weight: 400;
}

small {
  font-size: 0.75rem; /* 12px */
}

/* ===== LINKS ===== */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: var(--accent-500);
}

/* ===== LAYOUT ===== */
header p {
  color: var(--text-600);
  margin-top: 10px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 40px;
}

main p {
  text-align: justify;
}

footer {
  border-top: 1px solid var(--text-500);
  color: var(--text-500);
  font-size: 0.9em;
  flex-shrink: 0;
}

footer p {
  margin: 0;
  text-align: center;
}

/* ===== NAVIGATION ===== */
nav {
  color: var(--primary-500);
}

nav a {
  display: inline-block;
  margin-right: 30px;
  padding: 10px 0;
  color: var(--primary-500);
}

/* ===== COMPONENTS ===== */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 12px;
  background-color: var(--background-50);
  color: var(--text-900);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  z-index: 1000;
}

.theme-toggle:hover {
  background-color: var(--primary-700);
}

/* ===== HOME PAGE STYLES ===== */
.home-page main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home-page h1 {
  text-align: center;
  font-size: 4.21rem;
  margin: 0;
}

.home-page p {
  text-align: center;
}

.home-page nav {
  text-align: center;
  align-items: center;
}

.home-page a {
  text-align: center;
  margin: 0 15px;
  color: var(--primary-500);
}