:root {
  /* ====== Colors ====== */
  --primary-color: #3f37c9;
  --primary-color-100: #695cfe;
  --secondary-color: #e5e7eb;
  --success-color: #4caf50;
  --danger-color: #f44336;
  --info-color: #2196f3;
  --warning-color: #f87d09;
  --sidebar-text: #707070;
  --title-and-subtitle: #333;

  --white: #fff;
  --blue: #0000ff;
  --gray: #808080;
  --gray-light-shade: #f5f5f5;
  --yellow: #fad400;

  /* ====== Fonts ====== */
  --logo-font: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  /* ====== Transition ====== */
  --tran-02: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.4s ease;
  --tran-05: all 0.5s ease;
}