@import "tailwindcss";

@theme {
  --color-surface: #0a0a0a;
  --color-surface-raised: #171717;
  --color-ink: #ffffff;
  --color-body: #e5e5e5;
  --color-nav-muted: #a3a3a3;
  --color-border: #262626;
  --color-accent: #169b62;
  --color-accent-hover: #128a56;

  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --radius-button: 9999px;
  --radius-input: 0.5rem;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-surface font-sans text-ink antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-full border border-ink px-6 py-2.5 text-base font-medium text-ink transition-colors;
    @apply hover:border-accent hover:bg-accent hover:text-ink;
    @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent;
  }

  .btn-primary-sm {
    @apply px-4 py-2 text-sm;
  }

  .nav-shell {
    @apply mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3.5 sm:px-6 lg:px-8;
    @apply min-h-[4.25rem];
  }

  .nav-left {
    @apply flex min-w-0 flex-1 items-center gap-8 lg:gap-10;
  }

  .nav-right {
    @apply flex shrink-0 items-center gap-3;
  }

  .nav-link {
    @apply text-base text-nav-muted transition-colors;
    @apply hover:text-accent focus-visible:text-accent focus-visible:outline-none;
  }

  .nav-dropdown-panel {
    @apply pointer-events-none invisible absolute left-0 right-0 top-full z-40 max-h-[90vh] overflow-auto border-t border-border bg-surface-raised opacity-0;
    @apply max-md:hidden transition-opacity duration-150;
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.45);
  }

  .nav-dropdown-panel.is-open {
    @apply pointer-events-auto visible opacity-100;
  }

  .nav-products-trigger.is-active {
    @apply text-accent;
  }

  .nav-products-chevron {
    @apply transition-transform duration-150;
  }

  .nav-products-trigger.is-active .nav-products-chevron {
    @apply rotate-180;
  }

  .nav-dropdown-feature {
    @apply flex items-start gap-3 rounded-lg transition-colors;
    @apply hover:text-accent focus-visible:text-accent focus-visible:outline-none;
  }

  .nav-dropdown-feature-icon {
    @apply flex size-12 shrink-0 items-center justify-center rounded-lg bg-accent/10;
  }

  .nav-dropdown-secondary {
    @apply block rounded-lg transition-colors;
    @apply hover:text-accent focus-visible:text-accent focus-visible:outline-none;
  }

  .nav-dropdown-spotlight {
    @apply relative z-10 w-72 rounded-xl bg-surface p-4;
  }

  .nav-dropdown-spotlight-image {
    @apply aspect-[4/3] w-full rounded-lg bg-gradient-to-br from-accent/20 via-surface-raised to-border;
  }

  .nav-dropdown-spotlight-link {
    @apply inline-flex items-center gap-2 text-sm font-semibold text-ink transition-colors;
    @apply hover:text-accent focus-visible:text-accent focus-visible:outline-none;
  }

  .nav-mobile-products summary {
    list-style: none;
  }

  .nav-mobile-products summary::-webkit-details-marker {
    display: none;
  }

  .nav-mobile-products-toggle {
    @apply flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2.5 text-base font-semibold text-ink transition-colors;
    @apply hover:text-accent focus-visible:text-accent focus-visible:outline-none;
  }

  .nav-mobile-products-chevron {
    @apply transition-transform duration-150;
  }

  .nav-mobile-products[open] .nav-mobile-products-chevron {
    @apply rotate-180 text-accent;
  }

  .nav-mobile-products[open] .nav-mobile-products-toggle {
    @apply text-accent;
  }

  .nav-mobile-products-panel {
    @apply flex flex-col gap-1 px-1;
  }

  .nav-mobile-products-panel .nav-products-divider {
    @apply md:my-8;
  }

  .faq-item summary {
    list-style: none;
  }

  .faq-item summary::marker {
    content: "";
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-question {
    @apply flex w-full cursor-pointer items-center justify-between gap-4 py-5 text-left transition-colors;
    @apply hover:text-accent focus-visible:text-accent focus-visible:outline-none;
  }

  .faq-chevron {
    @apply transition-transform duration-150;
  }

  .faq-item[open] .faq-chevron {
    @apply rotate-180 text-accent;
  }

  .faq-answer {
    @apply pb-5 pr-8;
  }

  .form-label {
    @apply mb-1.5 block text-sm font-medium text-ink;
  }

  .form-input {
    @apply w-full rounded-lg border border-border bg-surface-raised px-4 py-2.5 text-ink placeholder:text-nav-muted;
    @apply focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/40;
  }

  .form-file {
    @apply w-full rounded-lg border border-border bg-surface-raised px-4 py-2.5 text-body;
    @apply file:mr-4 file:cursor-pointer file:rounded-md file:border-0 file:bg-accent file:px-4 file:py-2 file:text-sm file:font-medium file:text-white;
    @apply hover:file:bg-accent/90 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/40;
  }

  .careers-empty {
    @apply rounded-xl border border-border bg-surface-raised px-6 py-8 text-center;
  }

  .blog-card {
    @apply flex flex-col rounded-xl border border-border bg-surface-raised p-6 transition-colors;
    @apply hover:border-accent focus-visible:border-accent focus-visible:outline-none;
  }

  .blog-card-category {
    @apply text-xs font-semibold uppercase tracking-wide text-accent;
  }

  .blog-card-title {
    @apply mt-3 text-lg font-semibold leading-snug text-ink transition-colors group-hover:text-accent;
  }

  .blog-card-excerpt {
    @apply mt-3 flex-1 text-sm leading-relaxed text-body;
  }

  .blog-card-meta {
    @apply mt-5 flex items-center gap-2 text-xs text-nav-muted;
  }

  .blog-nav-link {
    @apply flex flex-col gap-1 rounded-lg border border-border p-4 transition-colors hover:border-accent focus-visible:border-accent focus-visible:outline-none;
  }

  .blog-nav-label {
    @apply text-xs font-semibold uppercase tracking-wide text-accent;
  }

  .blog-nav-title {
    @apply text-sm font-medium leading-snug text-ink;
  }

  .prose-article {
    @apply text-base leading-relaxed text-body lg:text-lg;
  }

  .prose-article .lead {
    @apply text-lg leading-relaxed text-body lg:text-xl;
  }

  .prose-article h2 {
    @apply mt-10 text-2xl font-semibold text-ink;
  }

  .prose-article p {
    @apply mt-5;
  }

  .prose-article em {
    @apply italic;
  }

  .prose-article blockquote {
    @apply mt-6 border-l-2 border-accent pl-5 text-lg font-medium italic text-ink;
  }

  .prose-article .article-source {
    @apply mt-10 border-t border-border pt-5 text-sm text-nav-muted;
  }

  .section-panel {
    @apply flex min-h-dvh flex-col justify-center bg-surface;
  }

  .container-page {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
  }
}