@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-hedvig-sans: "Hedvig Letters Sans", system-ui, sans-serif;
  --font-hedvig-serif: "Hedvig Letters Serif", Georgia, serif;

  /* Light mode syntax highlighting (clear differentiation like dark mode) */
  --sh-class: #171717;
  --sh-identifier: #171717;
  --sh-sign: #707070;
  --sh-string: #4a4a4a;
  --sh-keyword: #4a4a4a;
  --sh-comment: #666666;
  --sh-jsxliterals: #171717;
  --sh-property: #4a4a4a;
  --sh-entity: #4a4a4a;
}

.dark {
  /* Dark mode syntax highlighting (monochrome) */
  --sh-class: #ffffff;
  --sh-identifier: #ffffff;
  --sh-sign: #8996a3;
  --sh-string: #a7a7a7;
  --sh-keyword: #a7a7a7;
  --sh-comment: #878787;
  --sh-jsxliterals: #ffffff;
  --sh-property: #a7a7a7;
  --sh-entity: #a7a7a7;
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
  }
}

@keyframes fadeInBlur {
  from {
    opacity: 0;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@layer utilities {
  .bg-background-semi-transparent {
    position: relative;
  }

  .bg-background-semi-transparent::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: hsl(var(--background));
    opacity: 0.8;
    z-index: -1;
    pointer-events: none;
  }
}

/* Updates/Blog styles */
.updates p {
  min-height: 1.87em;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 3px 2px;
}

.updates h2 {
  font-size: 26px;
  margin-top: 0.8em;
  margin-bottom: 10px;
  font-weight: 500;
}

.updates h4 {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 15px;
}

.updates h3 {
  font-size: 1.25em;
  margin-top: 0.8em;
  margin-bottom: 1px;
  font-weight: 500;
}

.updates p,
.updates li {
  color: #707070;
}

.updates ul li {
  margin-top: 1px;
  margin-bottom: 1px;
  padding-left: 12px;
  padding-top: 3px;
  padding-bottom: 2px;
}

.updates ul {
  list-style-type: disc;
  list-style-position: inside;
}

.updates p code span {
  font-family: var(--font-geist-mono);
  color: #eb5757;
  font-size: 85%;
  font-weight: 600;
}

.updates p code {
  border-radius: 4px;
  background: hsla(44, 6%, 50%, 0.15);
  padding: 0 0.4em 3px 0.4em;
  line-height: normal;
}

.updates a {
  text-decoration: underline;
}

.updates blockquote p {
  margin: 7px 2px;
  padding-left: 14px;
  padding-right: 14px;
  border-left: 3px solid;
  color: hsl(var(--foreground));
}

.updates b,
.updates strong {
  font-weight: 500;
}

/* App description styles */
.app-description strong {
  display: block;
  padding-top: 1.5em;
  padding-bottom: 0.5em;
  color: hsl(var(--foreground));
}

.app-description strong:first-child {
  padding-top: 0;
}

.app-description ul,
.app-description ol {
  padding-bottom: 1em;
}

pre::-webkit-scrollbar {
  display: none;
}

pre {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: auto;
}

pre code {
  font-size: 13px;
  font-weight: 500;
}

.sh__line,
pre code span,
pre code div,
pre span,
pre div {
  background: transparent;
  background-color: transparent;
}

/* Respect user's motion preferences for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  /* Keep essential animations but simplify */
  video {
    animation: none;
  }
}