@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap");
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@source "../../../templates/**/*.php";
@source "../../../app/**/*.php";
@source "../../../app/**/*.md";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@layer base {
  html {
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    @apply flex min-h-screen flex-col bg-slate-50 text-slate-950 antialiased transition-colors duration-300 dark:bg-slate-950 dark:text-slate-100;
    font-feature-settings:
      "cv02",
      "cv03",
      "cv04",
      "cv11";
  }

  ::selection {
    @apply bg-blue-600 text-white;
  }

  a {
    @apply transition-colors;
  }

  :focus-visible {
    @apply outline-2 outline-offset-2 outline-blue-500;
  }

  .wrap {
    @apply grow shrink-0 basis-auto;
  }

  .contain, .band {
    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
  }

  .contain-narrow, .band-narrow {
    @apply mx-auto w-full max-w-3xl px-4 sm:px-6 lg:px-8;
  }

  .contain-wide, .band-wide {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
  }
}

@layer components {
  footer {
    @apply grow-0;
  }

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

  .section, section {
    @apply py-10 md:py-16;
  }

  .section-tight {
    @apply py-10 md:py-14;
  }

  .text-gradient {@apply bg-linear-to-r from-indigo-400 to-pink-600 bg-clip-text text-transparent}

  .eyebrow {
    @apply font-semibold tracking-widest text-blue-600 dark:text-blue-400;
  }

  .btn {
    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold leading-none transition duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-primary {
    @apply bg-blue-600 text-white shadow-sm shadow-blue-600/25 hover:bg-blue-500 focus-visible:outline-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400;
  }

  .btn-secondary {
    @apply border border-slate-200 bg-white text-slate-900 hover:border-slate-300 hover:bg-slate-100 focus-visible:outline-blue-500 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100 dark:hover:border-slate-700 dark:hover:bg-slate-800;
  }

  .btn-ghost {
    @apply text-slate-700 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-blue-500 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white;
  }

  .card {
    @apply rounded-lg border border-slate-200 bg-white p-6 shadow-sm shadow-slate-950/5 transition-colors dark:border-slate-800 dark:bg-slate-900/80 dark:shadow-black/20;
  }

  .bg-pre-blue {
    @apply bg-blue-50 text-blue-950 dark:bg-blue-950/35 dark:text-blue-50;
  }

  .bg-pre-emerald {
    @apply bg-emerald-50 text-emerald-950 dark:bg-emerald-950/35 dark:text-emerald-50;
  }

  .bg-pre-amber {
    @apply bg-amber-50 text-amber-950 dark:bg-amber-950/35 dark:text-amber-50;
  }

  .bg-pre-rose {
    @apply bg-rose-50 text-rose-950 dark:bg-rose-950/35 dark:text-rose-50;
  }

  .nav-link {
    @apply rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white;
  }

  .prose-shell {
    @apply mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8;
  }

  .prose {
    color: #475569;
    line-height: 1.75;
  }

  .dark .prose {
    color: #94a3b8;
  }

  .prose > * + * {
    margin-top: 1.25em;
  }

  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    color: #0f172a;
    font-weight: 700;
    line-height: 1.25;
  }

  .dark .prose h1,
  .dark .prose h2,
  .dark .prose h3,
  .dark .prose h4,
  .dark .prose h5,
  .dark .prose h6 {
    color: #f8fafc;
  }

  .prose h1 {
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 0.5em;
  }

  .prose h2 {
    font-size: 1.75rem;
    margin-top: 2em;
    margin-bottom: 0.75em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .dark .prose h2 {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  .prose h3 {
    font-size: 1.375rem;
    margin-top: 1.75em;
    margin-bottom: 0.6em;
  }

  .prose h4 {
    font-size: 1.125rem;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }

  .prose h5,
  .prose h6 {
    font-size: 1rem;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #334155;
  }

  .dark .prose h5,
  .dark .prose h6 {
    color: #cbd5e1;
  }

  .prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
  }

  .dark .prose a {
    color: #60a5fa;
  }

  .prose a:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  .dark .prose a:hover {
    color: #93c5fd;
  }

  .prose strong,
  .prose b {
    color: #0f172a;
    font-weight: 600;
  }

  .dark .prose strong,
  .dark .prose b {
    color: #f1f5f9;
  }

  .prose em,
  .prose i {
    color: #334155;
  }

  .dark .prose em,
  .dark .prose i {
    color: #cbd5e1;
  }

  .prose ul,
  .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
  }

  .prose ul {
    list-style-type: disc;
  }

  .prose ol {
    list-style-type: decimal;
  }

  .prose ul > li,
  .prose ol > li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0.375em;
  }

  .prose ul > li::marker,
  .prose ol > li::marker {
    color: #2563eb;
  }

  .dark .prose ul > li::marker,
  .dark .prose ol > li::marker {
    color: #3b82f6;
  }

  .prose ul ul,
  .prose ul ol,
  .prose ol ul,
  .prose ol ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  .prose pre {
    background-color: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    padding: 1.25em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    overflow-x: auto;
    font-size: 0.875em;
    line-height: 1.7;
  }

  .dark .prose pre {
    background-color: #141f38;
    border-color: rgba(255, 255, 255, 0.06);
  }

  .prose pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: #334155;
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  }

  .dark .prose pre code {
    color: #e2e8f0;
  }

  .prose code {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.375rem;
    padding: 0.2em 0.4em;
    font-size: 0.875em;
    color: #1d4ed8;
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  }

  .dark .prose code {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
    color: #93c5fd;
  }

  .prose blockquote {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-left: 1.25em;
    border-left: 3px solid #2563eb;
    font-style: italic;
    color: #475569;
  }

  .dark .prose blockquote {
    border-left-color: #3b82f6;
    color: #cbd5e1;
  }

  .prose blockquote p:first-of-type {
    margin-top: 0;
  }

  .prose blockquote p:last-of-type {
    margin-bottom: 0;
  }

  .prose table {
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-collapse: collapse;
    font-size: 0.875em;
    line-height: 1.5;
  }

  .prose thead {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .dark .prose thead {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .prose th {
    padding: 0.75em 1em;
    text-align: left;
    font-weight: 600;
    color: #0f172a;
  }

  .dark .prose th {
    color: #f1f5f9;
  }

  .prose td {
    padding: 0.625em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
  }

  .dark .prose td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
  }

  .prose tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
  }

  .dark .prose tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
  }

  .prose tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
  }

  .dark .prose tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
  }

  .prose img {
    border-radius: 0.5rem;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    max-width: 100%;
    height: auto;
    display: block;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .prose hr {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .dark .prose hr {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  .prose li > p,
  .prose blockquote > p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
}

@layer utilities {

}
