@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 (Candy Cat theme)
================================ */
  --primary: #edd8bb; /* Main warm orange from logo */
  --primaryDark: #d88416; /* Deep orange */
  --primaryLight: #ffd28a; /* Soft pastel orange */

  /* ===============================
   LIGHTS (Cream / Beige)
================================ */
  --light1: #ffffff;
  --light2: #f8f3ea; /* Soft cream */
  --light3: #e7dcc8; /* Beige */

  /* ===============================
   DARKS
================================ */
  --dark1: #1f2430; /* Strong dark for text */
  --dark2: #3c4454; /* Muted navy-gray */
  --dark3: #8b8f98; /* Soft gray */

  /* ===============================
   ACCENTS
================================ */
  --accentOrange: #ff7a1a; /* Bright corner orange */
  --accentOrangeDark: #e35f00;

  --accentRed: #f47b61; /* Bow color */

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