:root {
  /* 🌙 Primary */
  --color-green: #0F766E;   /* Emerald Green */
  --color-gold: #D4AF37;    /* Rich Gold */

  /* 📘 Secondary */
  --color-blue: #1E3A8A;    /* Deep Blue */
  --color-beige: #F5F3E7;   /* Soft Beige */

  /* 🎨 Accent */
  --color-red: #B91C1C;     /* Crimson Red */
  --color-teal: #14B8A6;    /* Sky Teal */

  /* ⚪ Neutral */
  --color-white: #FFFFFF;
  --color-dark: #111827;    /* Dark Gray for text */
  --color-gray: #E5E7EB;    /* Light Gray for borders */
}

/* Example Usage */
body {
  background-color: var(--color-beige);
  color: var(--color-dark); 
  font-family: "Segoe UI", Tahoma, sans-serif;
}

header {
  background-color: var(--color-green);
  color: var(--color-white);
}

button.primary {
  background-color: var(--color-green);
  color: var(--color-white);
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}
button.primary:hover {
  background-color: var(--color-teal);
}

button.secondary {
  background-color: var(--color-gold);
  color: var(--color-dark);
}

.notice {
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 10px;
  border-radius: 4px;
}

footer {
  background-color: var(--color-blue);
  color: var(--color-white);
  padding: 20px;
  text-align: center;
}