@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 *));

/* 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;

  --color-main: light-dark(var(--color-steel), var(--color-bermuda));
  --color-accent: light-dark(var(--color-bronze), var(--color-desert));

  --color-header: light-dark(var(--color-neutral-800), var(--color-neutral-200));
  --color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200));
  --color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
}

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

  :root:where(.dark, .dark *) {
    color-scheme: dark;
  }

  *,
  ::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);
  }

  /* Shiki syntax highlighting */
  :root {
    --shiki-fg: var(--shiki-light);
    --shiki-bg: var(--color-neutral-200);
  }

  .dark {
    --shiki-fg: var(--shiki-dark);
    --shiki-bg: var(--color-neutral-800);
  }

  pre.shiki {
    background-color: var(--shiki-bg) !important;
    color: var(--shiki-fg) !important;
  }

  pre.shiki span {
    color: var(--shiki-light);
  }

  .dark pre.shiki span {
    color: var(--shiki-dark) !important;
  }
}

@utility card-base {
  @apply rounded-xl transition-all duration-300
         border border-neutral-100 dark:border-stone-500/20
         bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90
         shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
}

@utility card-hover-icon {
  @apply transition-all duration-300
         text-primary
         group-hover:text-main
}

@utility card-text-header {
  @apply text-header
         md:text-5xl
         text-4xl
}

@utility card-text-header-minor {
  @apply text-header
         md:text-3xl
         text-2xl
         font-semibold
}

@utility card-text-header-description {
  @apply text-primary
         text-lg
         text-pretty
}

@utility card-text-title {
  @apply text-primary
         font-bold
}

@utility card-text-description {
  @apply text-secondary
}

@utility card-hover-text-title {
  @apply transition-all duration-300
         group-hover:text-main
}

@utility card-hover-text-gitea {
  @apply transition-all duration-300
         group-hover:text-gitea-primary
}

/* 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;
}