/* basic CSS that can be applied to every site */

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200..1000&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(228, 85%, 63%);
  --first-color-a: hsl(228 85% 63% / 75%);
  --title-color: hsl(231, 16%, 16%);
  --label-color: hsl(228, 10%, 38%);
  /* --text-color: hsl(228, 8%, 56%); */
  --field-background-color: hsl(228, 100%, 99%);
  --text-color: hsl(228, 17%, 34%);
  --text-color-muted: hsla(228, 17%, 34%, 0.7);
  --border-color: rgba(134, 137, 152, 0.2);
  --border-color-light: rgba(134, 137, 152, 0.3);
  --border-loading: rgb(169, 169, 169);
  --border-loading-light: rgb(211, 211, 211);
  --floating-box-color: hsl(228, 100%, 99%);
  --body-color: hsl(228, 100%, 99%);
  --site-background-color: hsl(228, 100%, 96%);
  --shadow-color: hsla(228, 80%, 4%, .1);
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Nunito Sans", system-ui;
  --normal-font-size: .938rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .75rem;
  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --sidebar-width-large: 316px;
  --sidebar-width-small: 288px;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --normal-font-size: 1rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--site-background-color);
  color: var(--text-color);
  transition: background-color .4s;
}

a {
  text-decoration: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  all: unset;
}

/*=============== VARIABLES DARK THEME ===============*/
html.dark-theme body {
  --first-color: hsl(228, 70%, 63%);
  --title-color: hsl(228, 18%, 96%);
  --text-color: hsl(228, 10%, 67%);
  --text-color-muted: hsla(228, 10%, 67%, 0.7);
  --body-color: hsl(228, 24%, 16%);
  --site-background-color: hsl(228, 25%, 8%);
  --shadow-color: hsla(228, 80%, 4%, .3);
  --organization-background-color: hsl(228, 24%, 25%);
  --floating-box-color: rgb(63, 63, 81);
  --border-loading: rgb(64, 64, 64);
  --border-loading-light: rgb(105, 105, 105);
  --label-color: hsl(228, 10%, 64%);
  --field-background-color: hsl(227, 24%, 15%);
}

/*========== 
	Color changes in some parts of 
	the website, in dark theme
==========*/
.dark-theme .sidebar__content::-webkit-scrollbar {
  background-color: hsl(228, 16%, 30%);
}

.dark-theme .sidebar__content::-webkit-scrollbar-thumb {
  background-color: hsl(228, 16%, 40%);
}



/* Define skeleton color variables based on theme */
:root {
  --skeleton-base: #f0f0f0;
  --skeleton-highlight: #e0e0e0;
}

body.dark-theme {
  --skeleton-base: hsl(228, 24%, 20%);
  --skeleton-highlight: hsl(228, 24%, 30%);
}


/*============SKELETON================*/
/* Skeleton loading animation */
@keyframes skeletonPulse {
  0% {
    background-position: -200px 0;
  }

  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Base skeleton styles */
.skeleton-bar,
.skeleton-circle {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
  background-size: 200px 100%;
  animation: skeletonPulse 1.5s infinite linear;
}

/* Skeleton shapes */
.skeleton-bar {
  height: 16px;
  border-radius: 4px;
}

.skeleton-title .skeleton-bar {}

.skeleton-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* Additional skeleton item styles */
.skeleton-title {
  height: 24px;
  border-radius: 4px;
}

.skeleton-item {
  border-radius: 4px;
}

.skeleton-section {
  opacity: 0.8;
}

.floating-box {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: var(--floating-box-color);
  color: var(--text-color) !important;
  border-top-left-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  z-index: 1000000 !important;
}

.modal-title {
  color: var(--title-color);
}