@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@import "@fontsource/lexend/300.css";
@import "@fontsource/lexend/400.css";
@import "@fontsource/lexend/700.css";
@import "@fontsource/lexend/800.css";
@import "@fontsource/outfit/300.css";
@import "@fontsource/outfit/400.css";
@import "@fontsource/outfit/700.css";
@import "@fontsource/outfit/800.css";
@import "@fontsource/outfit/900.css";

@theme {
  /* Design tokens */
  --color-purple-hero: #2D2062;
  --color-purple-accent: #6953C4;
  --color-purple-vivid: #5F39F9;
  --color-mint-accent: #7EFF83;
  --color-white: #FFFFFF;
  --color-bg-light: #FAFAFA;
  --color-text-dark: #212025;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;

  /* Primary font — Lexend (geometric sans, closest to Neulis Neue) */
  --font-sans: "Lexend", "Outfit", system-ui, -apple-system, sans-serif;
}

/* ─── CSS custom properties used by template pages ───── */
:root {
  --max-width: 860px;
  --wide-width: 1200px;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

  --font-serif: "Outfit", Georgia, serif;

  --color-text: #212025;
  --color-bg: #ffffff;
  --color-muted: #6B7280;
  --color-accent: #6953C4;
  --color-surface: #FAFAFA;

  --radius: 4px;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/*
 * IMPORTANT: All base styles must be in @layer base.
 * In Tailwind v4, unlayered CSS beats @layer utilities, which would
 * silently override every py-*, text-*, etc. utility class sitewide.
 */
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: #ffffff;
    color: #212025;
    font-family: "Lexend", "Outfit", system-ui, -apple-system, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Lexend", "Outfit", system-ui, sans-serif;
    line-height: 1.1;
    font-weight: 800;
    color: #212025;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* ─── Prose styles for blog/page content ─────────────── */
/* Uses @layer components so utility classes can still override inside prose */
@layer components {
  .prose h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #212025;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }
  .dark .prose h2 {
    color: #FFFFFF;
  }
  .prose h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212025;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .dark .prose h3 {
    color: #FFFFFF;
  }
  .prose p {
    color: #6B7280;
    line-height: 1.8;
    margin-bottom: 1.25rem;
  }
  .dark .prose p {
    color: #D1D5DB;
  }
  .prose a {
    color: #6953C4;
    text-decoration: underline;
  }
  .prose strong {
    color: #212025;
    font-weight: 700;
  }
  .dark .prose strong {
    color: #FFFFFF;
  }
  .prose ul, .prose ol {
    color: #6B7280;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.8;
  }
  .dark .prose ul, .dark .prose ol {
    color: #D1D5DB;
  }
  .prose blockquote {
    border-left: 4px solid #6953C4;
    padding-left: 1rem;
    color: #6B7280;
    font-style: italic;
    margin: 1.5rem 0;
  }
  .dark .prose blockquote {
    color: #D1D5DB;
    border-left-color: #7EFF83;
  }
  .prose pre {
    position: relative;
    border: 1px solid #E5E7EB;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    font-size: 0.875rem !important;
    margin: 2rem 0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
  }
  .dark .prose pre {
    border-color: #1E1B2E;
  }
  .prose .emdash-code {
    background-color: transparent !important;
  }
  .prose .emdash-code pre {
    margin: 0 !important;
  }
  .prose code {
    background-color: #FAFAFA;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: #6953C4; /* Inline code styling */
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  .dark .prose code {
    background-color: #1A1825;
    color: #7EFF83;
  }
  .prose pre code {
    background-color: transparent !important;
    padding: 0 !important;
    color: inherit; /* Shiki span tags will handle the actual syntax highlighting */
    font-size: inherit !important;
  }
  .prose .emdash-code span {
    color: #6953C4 !important;
  }
  .prose img {
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }
}

/* Hero entrance — CSS-driven so it fires before any JS loads */
@keyframes heroSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-hero {
  animation: heroSlideDown 0.7s ease-out both;
}

.hero-delay-1 { animation-delay: 0ms; }
.hero-delay-2 { animation-delay: 150ms; }
.hero-delay-3 { animation-delay: 300ms; }
.hero-delay-4 { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .animate-hero {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Scroll-animated elements start hidden so GSAP has no flash to snap through */
.animate-on-scroll,
.animate-from-left,
.animate-from-right {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-from-left,
  .animate-from-right {
    opacity: 1;
  }
}