:root {
  --bg-page: #0A0A0A;
  --panel-bg: color-mix(in srgb, var(--primary-color), var(--bg-page) 90%);

  /* Text */
  --text-color: white;
  --text-color-light: color-mix(in srgb, white, transparent 30%);
  --text-color-lighter: color-mix(in srgb, white, transparent 55%);
  --text-color-inv: black;

  --minicalendar-activity-color: color-mix(in srgb, var(--primary-color), transparent 70%);

  --in-page-edit-hover-color: color-mix(in srgb, var(--primary-color), transparent 75%);
  --in-page-edit-loading-color: var(--in-page-edit-hover-color);

  /* Popup */
  --bg-popup: #2A2338;
  --popup-shadow: 0px 4px 10px 6px var(--bg-page);
  --elevation-2-shadow: 0px 5px 12px 0px var(--bg-page);

  /* Panel */
  --panel-header-bg: color-mix(in srgb, var(--primary-color), transparent 90%);
  --panel-header-darker: color-mix(in srgb, var(--primary-color), transparent 75%);

  /* Cards */
  --card-bg: color-mix(in srgb, var(--primary-color), transparent 90%);
  --gray-100: color-mix(in srgb, var(--primary-color), transparent 90%);
  --gray-250: color-mix(in srgb, var(--primary-color), transparent 75%);

  /* Inputs */
  --removable-label-bg: color-mix(in srgb, var(--primary-color), var(--bg-page) 90%);
  --removable-label-inner-bg: color-mix(in srgb, var(--primary-color), transparent 84%);

  /* Scrollbar */
  --scrollbar-thumb-bg: color-mix(in srgb, var(--text-color), transparent 65%);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--text-color), transparent 55%);
  --scrollbar-track-bg: color-mix(in srgb, var(--text-color), transparent 85%);
}

.ui.placeholder {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.08) 30%) !important;
}