:root {
  /* Primary Colors */
  --color-primary: #001660;
  --color-secondary: #FDDB00;

  /* COLORS */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-DeepBlue-light: #E0E5F9;
  --color-DeepBlue-hover: #264BD7;
  --color-Yellow-light: #FFF2D5;
  --color-Yellow-hover: #FFBB00;
  --color-Pink-light: #FEF5F0;
  --color-Pink-primary: #FFC1BA;
  --color-Pink-hover: #FFC9C2;
  --color-Blue-light: #E2F3FF;
  --color-Blue-primary: #7EC9FF;
  --color-Blue-hover: #3FABFD;
  --color-Quaternary-Blue-hover: #7DD8FF;
  --color-Quaternary-Blue-light: #DAEFFC;

  /* Gray */
  --color-gray-50: #F9FAFB;

  /* Neutral */
  --color-neutral-50: #FDFDFD;
  --color-neutral-100: #F4F6F8;
  --color-neutral-200: #E9EAEB;
  --color-neutral-300: #D5D7DA;
  --color-neutral-400: #A4A7AE;
  --color-neutral-500: #717680;
  --color-neutral-600: #535862;
  --color-neutral-700: #414651;
  --color-neutral-800: #252B37;
  --color-neutral-900: #181D27;

  /* Alerts */
  --color-success-light: #E3F4E8;
  --color-success-primary: #149448;
  --color-success-hover: #054F31;
  --color-warning-light: #FFFAEB; 
  --color-warning: #FDB022;
  --color-warning-hover: #7A2E0E; 
  --color-info-light: #E2F3FF;
  --color-info-primary: #7EC9FF;
  --color-info-hover: #3FABFD;
  --color-error-light: #FEF3F2;
  --color-error-primary: #F04438;
  --color-error-hover: #7A271A;

  /* General Colors */
  --color-ff00: #ffffff00;
  --color-ff26: #ffffff26;

  /* Utility Colors */
  --color-text: #252B37;
  --color-text-secondary: #414651;
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-overlay: rgba(0, 0, 0, 0.2);
  --color-border: #E2E0DA;

  /* TRANSITION */
  --transition-default: all 0.3s ease-in-out;

  /* FONT: FAMILY */
  --font-family-primary: 'Public Sans', sans-serif;
  --font-family-secondary: 'Staatliches', sans-serif;

  /* PX TO REM */
  --px-base: 16;
  --px-to-rem: 1rem;

  /* PX TO REM: 10-20 */
  --px-10: calc(10 / var(--px-base) * var(--px-to-rem));
  --px-12: calc(12 / var(--px-base) * var(--px-to-rem));
  --px-13: calc(13 / var(--px-base) * var(--px-to-rem));
  --px-14: calc(14 / var(--px-base) * var(--px-to-rem));
  --px-16: calc(16 / var(--px-base) * var(--px-to-rem));
  --px-18: calc(18 / var(--px-base) * var(--px-to-rem));
  --px-20: calc(20 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 20-30 */
  --px-20: calc(20 / var(--px-base) * var(--px-to-rem));
  --px-21: calc(21 / var(--px-base) * var(--px-to-rem));
  --px-22: calc(22 / var(--px-base) * var(--px-to-rem));
  --px-24: calc(24 / var(--px-base) * var(--px-to-rem));
  --px-26: calc(26 / var(--px-base) * var(--px-to-rem));
  --px-27: calc(27 / var(--px-base) * var(--px-to-rem));
  --px-28: calc(28 / var(--px-base) * var(--px-to-rem));
  --px-29: calc(29 / var(--px-base) * var(--px-to-rem));
  --px-30: calc(30 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 32-40 */
  --px-32: calc(32 / var(--px-base) * var(--px-to-rem));
  --px-34: calc(34 / var(--px-base) * var(--px-to-rem));
  --px-36: calc(36 / var(--px-base) * var(--px-to-rem));
  --px-39: calc(39 / var(--px-base) * var(--px-to-rem));
  --px-40: calc(40 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 42-50 */
  --px-42: calc(42 / var(--px-base) * var(--px-to-rem));
  --px-44: calc(44 / var(--px-base) * var(--px-to-rem));
  --px-48: calc(48 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 52-60 */
  --px-52: calc(52 / var(--px-base) * var(--px-to-rem));
  --px-54: calc(54 / var(--px-base) * var(--px-to-rem));
  --px-56: calc(56 / var(--px-base) * var(--px-to-rem));

  /* === CONTAINER === */
  --container: 100%;
}

@media (min-width: 1025px) {
  :root {
    --container: 1216px;
  }
}