@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-border: var(--border);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-card: var(--card);
}

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --primary: #0254d8;
  --border: #e5e7eb;
  --muted: #f4f4f5;
  --muted-foreground: #52525b;
  --card: #ffffff;
}

:root[data-theme="dark"] {
  --background: #030303;
  --foreground: #e5e7eb;
  --primary: #8bbcff;
  --border: #262626;
  --muted: #171717;
  --muted-foreground: #a1a1aa;
  --card: #0a0a0a;
}

/* Base styles using variables */
@layer base {
  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}

/* Animations - Reveal on Scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Prevent double-bounce conflicts when Astro View Transitions is actively animating */
:root[data-astro-transition] .reveal {
  transition: none !important;
}
