:root {
  --primary: #0f52ba; /* True sapphire blue */
  --secondary: #f0f6ff; /* Icy white-blue for backgrounds */
  --redcolor: #e74c3c; /* Classic red for warnings/errors */

  --main-background: linear-gradient(
    0deg,
    rgba(10, 25, 47, 1) 0%,       /* Deep navy base */
    rgba(15, 56, 116, 1) 63%,     /* Bold sapphire */
    rgba(20, 80, 170, 1) 100%     /* Gleaming blue highlight */
  );

  --secodary-background: #102b55; /* Sapphire dusk tone */
  --third-background: #1e4a88;    /* Rich gemstone blue */
  --fourth-background: rgba(15, 82, 186, 0.25); /* Subtle sapphire overlay */

  --nav-background: linear-gradient(
    0deg,
    rgba(15, 82, 186, 1) 0%,
    rgba(10, 25, 47, 1) 100%
  );

  --background-footer: #193b6a;        /* Footer with sapphire depth */
  --runingtext-background: #0f52ba;    /* Banner or strip in gemstone blue */
  --rtp-background: #d6e9ff;           /* Pale blue highlight */

  --background: #0a1a2f;               /* Sapphire night base */
  --secondary-background: #102b55;
  --mobile-background: #0a1a2f;

  --color: #f0f8ff;                    /* Soft icy white text */
  --third: #98c4f4;                    /* Sapphire light shimmer */
  --footer-color: #c5dffe;             /* Footer accent text */

  --primary-gradient: linear-gradient(to top, #0f52ba, #1e6fe3);
  --gold-gradient: linear-gradient(
    to right,
    rgba(105, 173, 255, 0) 0%,
    rgba(105, 173, 255, 0.4) 25%,
    rgba(105, 173, 255, 0.9) 50%,
    rgba(105, 173, 255, 0.4) 75%,
    rgba(105, 173, 255, 0) 100%
  );

  --badge: #ffd700;                   /* Regal gold to complement the blue */
  --item-background: #123864;
  --secondary-item-background: #1e4a88;
  --item-background-hover: #2c66b2;

  --danger: #e74c3c;
  --success: #2ecc71; /* Emerald success green */
}