@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: 100dvh;
  background-color: var(--light2);
  overflow: hidden; /* no scroll on body */
}

a {
  text-decoration: none;
}

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

.hidden {
  display: none;
}

:root {
  /* --- Primary brand tones (from logo) --- */
  --primary: #d46a1f; /* Warm orange (main brand color) */
  --primaryDark: #a85118; /* Darker burnt-orange for hover/focus */

  /* --- Light tones (backgrounds, cards) --- */
  --light1: #fffaf3; /* Soft warm white */
  --light2: #f8f3ea; /* Gentle beige for sections/cards */
  --light3: #e6d9c8; /* Subtle warm border/detail */

  /* --- Dark tones (text, shadows, depth) --- */
  --dark1: #2f2f35; /* Deep gray-blue → main text */
  --dark2: #47484f; /* Medium gray-blue → secondary text */
  --dark3: #7a7b84; /* Lighter neutral accent */

  /* --- Accents --- */
  --accentOrange: #e67e22; /* Bright orange highlight */
  --accentYellow: #f5c542; /* Soft golden yellow */
  --accentGreen: #4a7c3a; /* Leaf green (success) */

  /* --- System states --- */
  --successColor: #43a047;
  --warningColor: #fb8c00;
  --errorColor: #d32f2f;
  --informationColor: #1e88e5;
}