@font-face {
  font-family: Cairo;
  src: url("../fonts/Cairo-Regular.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: Cairo;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 100vh;
}

body {
  background-color: var(--primary);
}

a {
  text-decoration: none;
}

.caution {
  color: var(--accentOrange);
}

.hidden {
  display: none;
}

a.disabled,
li.disabled {
  pointer-events: none;
  opacity: 0.5; /* optional visual */
}

:root {
  /* ===============================
   PRIMARY (Turquoise theme)
=============================== */
  --primary: #1a86a1; /* Deep turquoise */
  --primaryDark: #115a6c; /* Dark teal */
  --primaryLight: #6ec1d6; /* Soft turquoise */

  /* ===============================
   LIGHTS (Grays)
=============================== */
  --light1: #ffffff;
  --light2: #f2f2f2;
  --light3: #d9d9d9;

  /* ===============================
   DARKS
=============================== */
  --dark1: #1f2937;
  --dark2: #4b5563;
  --dark3: #9ca3af;

  /* ===============================
   ACCENTS (from palette)
=============================== */
  --accentOrange: #eab866; /* Mustard */
  --accentOrangeDark: #d9a24c;

  --accentRed: #ff5a5a; /* Coral red */

  /* ===============================
   SYSTEM
=============================== */
  --successColor: #22c55e;
  --warningColor: #f59e0b;
  --errorColor: #ef4444;
  --informationColor: #3b82f6;
}