:root {
  /* Primary Colors */
  --color-primary:   #0C3B70;
  --color-secondary: #DE1B62;

  /* COLORS */
  --color-black: #151A23;
  --color-white: #FFFFFF;

  /* Blue */
  --color-blue-50:  #D7DBE6;
  --color-blue-100: #D0D4E1;
  --color-blue-200: #A1ABC4;
  --color-blue-300: #7483A7;
  --color-blue-400: #465E8B;
  --color-blue-500: #0C3B70;
  --color-blue-600: #123059;
  --color-blue-700: #132543;
  --color-blue-800: #111B2E;
  --color-blue-900: #0C111B;

  /* Purple */
  --color-Purple-50:  #FFDFE3;
  --color-Purple-100: #FFD8DD;
  --color-Purple-200: #FBB1BD;
  --color-Purple-300: #F4899D;
  --color-Purple-400: #EA5D7F;
  --color-Purple-500: #DE1B62;
  --color-Purple-600: #AE1F4E;
  --color-Purple-700: #801E3B;
  --color-Purple-800: #551A29;
  --color-Purple-900: #2D1318;

  /* Blue Light */
  --color-blue-light-50:  #E6FBFF;
  --color-blue-light-100: #A3EDFF;
  --color-blue-light-200: #77D9F7;
  --color-blue-light-300: #4BC0EB;
  --color-blue-light-400: #23A6DE;
  --color-blue-light-500: #23A6DE;
  --color-blue-light-550: #008BD2;
  --color-blue-light-600: #006CAB;
  --color-blue-light-700: #005085;
  --color-blue-light-800: #00355E;
  --color-blue-light-900: #001E38;

  /* Green */
  --color-green-50:  #F2F5E6;
  --color-green-100: #E1E8C5;
  --color-green-200: #CADB97;
  --color-green-300: #B3CF6D;
  --color-green-400: #9BC248;
  --color-green-500: #84B627;
  --color-green-600: #9BC248;
  --color-green-700: #42690C;
  --color-green-800: #264204;
  --color-green-900: #0F1C01;

  /* Neutral */
  --color-neutral-50:  #F0F4F8;
  --color-neutral-100: #E9EDF2;
  --color-neutral-200: #D7DCE0;
  --color-neutral-300: #C3CAD4;
  --color-neutral-400: #939BAE;
  --color-neutral-500: #646E82;
  --color-neutral-600: #454F62;
  --color-neutral-700: #2E3646 ;
  --color-neutral-800: #252B37;
  --color-neutral-900: #1E232E;

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

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

  /* FONT: FAMILY */
  --font-family-primary: 'Montserrat', 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));

  /* PX TO REM: 62-70 */
  --px-62: calc(62 / var(--px-base) * var(--px-to-rem));
  --px-64: calc(64 / var(--px-base) * var(--px-to-rem));

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

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