@import "tailwindcss";

/* Custom colors */
@theme {
  /* Brand colors */
  --color-primary: #80f20d;
  --color-primary-hover: #6dd00b;
  --color-secondary: #FFD700;
  --color-secondary-hover: #e6c200;

  /* Dark backgrounds */
  --color-dark-base: #0a0f0a;
  --color-dark-surface: #111611;
  --color-dark-elevated: #1a1f1a;

  /* Text colors */
  --color-text-primary: #310081;
  --color-text-secondary: #7B22DB;

  /* Helpers */
  --color-red-alert: #FF3B30;
  --color-bg-light: #fffafa;
  --color-header: #000000d2;
}



html {
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-secondary);
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-dark-base);
  font-family: system-ui, -apple-system, sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-secondary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
  border: 2px solid var(--color-secondary);
  transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-hover);
}

::-webkit-scrollbar-corner {
  background: var(--color-secondary);
}

/* Section scroll reveal effect */
section {
  min-height: 100vh;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* Default flex layout for non-hero sections */
section:not(#hero) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13vw;
}

@media (max-width: 640px) {
  section:not(#hero) {
    padding: 0 0.5vw;
  }
}

section.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* First section visible by default */
section:first-of-type {
  opacity: 1;
  transform: translateY(0);
}