:root {
  --bg-primary: hsl(220, 20%, 8%);
  --bg-secondary: hsl(220, 20%, 5%);
  --bg-tertiary: hsl(220, 20%, 12%);
  --bg-quaternary: hsl(220, 20%, 15%);
  --bg-hover: hsl(220, 20%, 20%);
  --bg-active: hsl(220, 20%, 10%);
  --bg-accent: hsl(48, 98%, 40%);

  --border-primary: hsl(220, 20%, 20%);
  --border-secondary: hsl(220, 20%, 15%);

  --text-primary: hsl(0, 0%, 100%);
  --text-secondary: hsl(0, 0%, 70%);
  --text-accent: hsl(48, 98%, 50%);

  /* Status Colors & Opacities */
  --color-red: hsl(0, 80%, 55%);
  --color-red_20: hsla(0, 80%, 55%, 0.2);
  --color-red_40: hsla(0, 80%, 55%, 0.4);
  --color-red_60: hsla(0, 80%, 55%, 0.6);

  --color-green: hsl(120, 60%, 60%);
  --color-green_20: hsla(120, 60%, 60%, 0.2);
  --color-green_40: hsla(120, 60%, 60%, 0.4);
  --color-green_60: hsla(120, 60%, 60%, 0.6);

  --color-yellow: hsl(50, 80%, 60%);
  --color-yellow_20: hsla(50, 80%, 60%, 0.2);
  --color-yellow_40: hsla(50, 80%, 60%, 0.4);
  --color-yellow_60: hsla(50, 80%, 60%, 0.6);

  --color-blue: hsl(200, 70%, 60%);
  --color-blue_20: hsla(200, 70%, 60%, 0.2);
  --color-blue_40: hsla(200, 70%, 60%, 0.4);
  --color-blue_60: hsla(200, 70%, 60%, 0.6);
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
  font-size: 16px;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
}

.page-wrapper {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  padding-left: clamp(13.5rem, calc(2 / 12 * 100vw), 20rem);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .page-wrapper {
    padding-left: 0 !important;
    padding-bottom: 64px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

.main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.main-content.column {
  flex-direction: column;
  justify-content: unset;
}

/* Global Utility Components */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--bg-quaternary);
  border: 1px solid var(--border-primary);
}

.icon-mask {
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: inline-block;
}

.tag .icon-mask {
  width: 1rem;
  height: 1rem;
}

.tag.tag-green {
  border-color: var(--color-green_60);
  color: var(--color-green);
}

.tag.tag-yellow {
  border-color: var(--color-yellow_60);
  color: var(--color-yellow);
}

.tag.tag-red {
  border-color: var(--color-red_60);
  color: var(--color-red);
}

.tag.tag-gray {
  color: var(--text-primary);
}

/* Custom Select Dropdown Scrollbar Hiding */
.custom-select-dropdown {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.custom-select-dropdown::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}