:root {
  /* Scroll config */
  scrollbar-width: thin;
  color-scheme: light;
  scroll-padding-top: 64px;

  /* HTML style base */
  background-color: var(--fai-blue);
  border-color: hsl(var(--border));

  /* Custom tailwind variables */
  --fai-blue: oklch(0.6006 0.171 254.52);

  --bg-light: oklch(1 0 0);
  --bg: oklch(0.98 0 0);
  --bg-dark: oklch(0.94 0 0);

  --shadow-in: inset 0 1px 2px #00000070;

  --shadow-btn: inset 0 3px 3px #ffffff30,
  inset 0 -3px 3px #00000030,
  inset 1px 0 2px #ffffff30,
  inset -1px 0 2px #00000030,
  1px 1px 2px #00000015,
  2px 2px 4px #00000015;

  --shadow-s: inset 0 1px 2px #ffffff30,
  0 1px 2px #00000030,
  0 2px 4px #00000015;

  --shadow-m: inset 0 1px 2px #ffffff50,
  0 2px 4px #00000030,
  0 4px 8px #00000015;
}


.dark {
  scrollbar-color: light;
  color-scheme: dark;

  --bg-light: oklch(0.28 0 0);
  --bg: oklch(0.22 0 0);
  --bg-dark: oklch(0.16 0 0);
  --fai-blue: oklch(0.4006 0.131 254.52);
}

body {
  * { border-color: hsl(var(--border)); }
  &:has(#dashboard) { 
    background-color: var(--bg-dark);
  }
}

.uk-container { box-sizing: border-box; }

#dashboard {
  & .uk-input {
    background-color: var(--bg-light);
  }

  & #settings .uk-card {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0.6rem;
  }
}

.uk-section {
  display: grid;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  gap: 0.7rem;

  h2 {
    padding-bottom: 0.1rem;
    border-bottom: 1px solid hsl(var(--border));
  }

  h4 {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
  }
}

.uk-link,
.uk-btn {
  text-wrap: nowrap;
}

.monster-navbar,footer {
  .uk-link, svg { color: whitesmoke; }
}

ul {
  & li:not(:first-child) {
    margin-top: 0.1rem !important;
  }
}

#info-list {
  & li::marker {
    content: "💡 ";
  }
}

.uk-card-header,
.uk-card-footer {
  padding: 0;
}

.uk-card-body {
  padding: 0.6rem 0 !important;
}

.uk-card {
  background-color: var(--bg);
  box-shadow: var(--shadow-m);
  border: none;
  gap: 0.35rem;
  padding: 1rem;
}

cite::before {
  content: "\201C";
  padding-right: 0.15rem;
}

cite::after {
  content: "\201D";
  padding-left: 0.15rem;
}