@import 'tailwindcss';
@import 'preline/variants.css';
@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';

/* Dark mode support for Tailwind CSS v4 */
/* https://tailwindcss.com/docs/dark-mode */
@custom-variant dark (&:where(.dark, .dark *));

/* Add custom colors */
@theme {
  --color-midnight: #0c354d;
  --color-turquoise: #0da797;
  --color-steel: #4682b4;
  --color-bermuda: #7fbab4;
  --color-desert: #f9deb2;
  --color-bronze: #9e7f5e;
  --color-gitea-primary: #609926;
  --color-gitea-secondary: #4c7a33;
}

@layer base {
  :root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --theme-transition: 0.3s ease;
  }

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-y: scroll;
  }

  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    --swup-fade-theme-duration: 0.2s;
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }

  body,
  a,
  button {
    transition:
      background-color var(--theme-transition),
      color var(--theme-transition),
      border-color var(--theme-transition);
  }
}

/* Content reveal animations */
.smooth-reveal,
.smooth-reveal-2,
.smooth-reveal-cards {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.animate-reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.smooth-reveal-fade {
  opacity: 0;
  transform: translateY(0px);
  transition:
    opacity 1.8s ease,
    transform 0.8s ease;
}

.animate-reveal-fade {
  opacity: 1 !important;
  transform: translateY(0) !important;
}