:root {
  /* Primary Colors */
  --color-primary: #d05500;
  --color-secondary: #6235e7;

  /* COLORS */
  --color-black: #0e0f10;
  --color-white: #ffffff;

  /* Orange */
  --color-orange-50: #fff3e6;
  --color-orange-100: #ffe0cc;
  --color-orange-200: #ffccb3;
  --color-orange-300: #ffb380;
  --color-orange-400: #ff944d;
  --color-orange-500: #d05500;
  --color-orange-600: #b94a00;
  --color-orange-700: #9f4000;
  --color-orange-800: #853500;
  --color-orange-900: #6b2b00;

  /* Yellow */
  --color-yellow-400: #ffb936;
  --color-yellow-500: #d05500;

  /* Purple */
  --color-purple-50: #f6f0ff;
  --color-purple-100: #ebdfff;
  --color-purple-200: #cfb5ff;
  --color-purple-300: #b18cff;
  --color-purple-400: #8a5ff5;
  --color-purple-500: #6235e7;
  --color-purple-600: #4523c2;
  --color-purple-700: #2d149c;
  --color-purple-800: #1a0975;
  --color-purple-900: #0e064f;

  /* Gray */
  --color-gray-50: #f9f7f6;
  --color-gray-100: #f3f0ee;
  --color-gray-200: #e7e3e1;
  --color-gray-300: #d9d4d2;
  --color-gray-400: #b5b0ae;
  --color-gray-500: #8c8684;
  --color-gray-600: #6c6664;
  --color-gray-700: #4d4846;
  --color-gray-800: #322e2d;
  --color-gray-900: #1c1a19;

  /* Utility Colors */
  --color-text: #252b37;
  --color-shadow: rgba(0, 0, 0, 0.05);
  --color-overlay: rgba(0, 0, 0, 0.2);
  --color-border: #c3cad4;
  --color-error-soft: #fff7f6;
  --color-error-border-soft: rgba(190, 23, 11, 0.25);

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

  /* FONT: FAMILY */
  --font-family-primary: "Gantari", sans-serif;
  --font-family-secondary: "Open Sans", sans-serif;

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

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