/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
}

.font-sans {
  font-family: "Poppins", sans-serif;
}

::selection {
  background-color: #47a3f3;
  color: #fefefe;
}

/* Scrollbar styling - prevents layout shifts and maintains accessibility */
html {
  scrollbar-gutter: stable;
  min-width: 360px;
}

/* Custom scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #a3a3a3;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #737373;
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: #525252;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #737373;
  }
}

/* Firefox scrollbar styling */
html {
  scrollbar-width: thin;
  scrollbar-color: #a3a3a3 transparent;
}

@media (prefers-color-scheme: dark) {
  html {
    scrollbar-color: #525252 transparent;
  }
}

:root {
  --sh-class: #2d5e9d;
  --sh-identifier: #354150;
  --sh-sign: #8996a3;
  --sh-string: #007f7a;
  --sh-keyword: #e02518;
  --sh-comment: #a19595;
  --sh-jsxliterals: #6266d1;
  --sh-property: #e25a1c;
  --sh-entity: #e25a1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sh-class: #4c97f8;
    --sh-identifier: white;
    --sh-keyword: #f47067;
    --sh-string: #0fa295;
  }
  html {
    color-scheme: dark;
  }
}