@import "tailwindcss";

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

@theme {
  --font-serif: var(--font-source-serif), "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-jetbrains), ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-ivory-50: #fdfcf9;
  --color-ivory-100: #f8f5ee;
  --color-ivory-200: #efe9dc;
  --color-stone-100: #e8e4da;
  --color-stone-200: #d6d0c3;
  --color-stone-300: #b9b2a3;
  --color-stone-400: #8f887a;
  --color-stone-500: #6b6557;
  --color-stone-600: #4e4a40;
  --color-ink-700: #35322b;
  --color-ink-800: #24221d;
  --color-ink-900: #171612;
  --color-ink-950: #0f0e0c;
  --color-accent-400: #c0613a;
  --color-accent-500: #a84f2a;
  --color-accent-600: #8d401f;
  --color-accent-700: #6f3217;
  --color-ok-500: #2f6f4e;
  --color-warn-500: #9a6b12;
  --color-danger-500: #a2342f;
  --color-info-500: #2f5a8a;
}

:root {
  --bg: var(--color-ivory-50);
  --bg-elev: #ffffff;
  --bg-muted: var(--color-ivory-100);
  --fg: var(--color-ink-900);
  --fg-muted: var(--color-stone-500);
  --fg-subtle: var(--color-stone-500);
  --line: var(--color-stone-200);
  --line-strong: var(--color-stone-300);
  --accent: var(--color-accent-500);
  --accent-fg: #ffffff;
  --ring: var(--color-accent-500);
  color-scheme: light;
}

.dark {
  --bg: var(--color-ink-950);
  --bg-elev: var(--color-ink-900);
  --bg-muted: var(--color-ink-800);
  --fg: var(--color-ivory-100);
  --fg-muted: var(--color-stone-300);
  --fg-subtle: var(--color-stone-400);
  --line: #2e2b25;
  --line-strong: #46423a;
  --accent: #d47a52;
  --accent-fg: var(--color-ink-950);
  --ring: #d47a52;
  color-scheme: dark;
}

@layer base {
  html {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion must win over component transitions */
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms;
      transition-duration: 0.001ms;
    }
  }
  body {
    min-height: 100dvh;
  }
  ::selection {
    background: color-mix(in oklab, var(--accent) 25%, transparent);
  }
  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 2px;
  }
  h1,
  h2,
  h3,
  .serif {
    font-family: var(--font-serif);
    letter-spacing: -0.01em;
  }
  a {
    text-underline-offset: 3px;
  }
  code,
  kbd,
  pre {
    font-family: var(--font-mono);
  }
}

@layer components {
  .container-x {
    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
  }
  .surface {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
  }
  .muted {
    color: var(--fg-muted);
  }
  .subtle {
    color: var(--fg-subtle);
  }
  .hairline {
    border-color: var(--line);
  }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium transition-colors;
    border: 1px solid var(--line-strong);
    background: var(--bg-elev);
    color: var(--fg);
  }
  .btn:hover {
    background: var(--bg-muted);
  }
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: transparent;
  }
  .btn-primary:hover {
    background: color-mix(in oklab, var(--accent) 88%, black);
  }
  .btn-danger {
    color: var(--color-danger-500);
    border-color: color-mix(in oklab, var(--color-danger-500) 40%, transparent);
  }
  .btn-sm {
    @apply px-2.5 py-1.5 text-xs;
  }
  .input {
    @apply w-full rounded-md px-3 py-2 text-sm;
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    color: var(--fg);
  }
  .input:focus {
    border-color: var(--accent);
  }
  .label {
    @apply block text-xs font-medium uppercase tracking-wide;
    color: var(--fg-muted);
  }
  .eyebrow {
    @apply text-xs font-semibold uppercase tracking-[0.14em];
    color: var(--accent);
  }
  .prose-paper {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
  }
  .prose-paper p {
    margin: 0 0 1em;
  }
  .prose-paper h1,
  .prose-paper h2,
  .prose-paper h3 {
    margin: 1.5em 0 0.5em;
    line-height: 1.25;
  }
  .prose-paper h1 {
    font-size: 1.6rem;
  }
  .prose-paper h2 {
    font-size: 1.3rem;
  }
  .prose-paper h3 {
    font-size: 1.1rem;
  }
  .prose-paper ul,
  .prose-paper ol {
    padding-left: 1.4em;
    margin: 0 0 1em;
  }
  .prose-paper li {
    margin: 0.25em 0;
  }
  .prose-paper code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--bg-muted);
    padding: 0.1em 0.35em;
    border-radius: 4px;
  }
  .prose-paper pre {
    background: var(--bg-muted);
    padding: 1em;
    border-radius: 8px;
    overflow: auto;
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .prose-paper pre code {
    background: none;
    padding: 0;
  }
  .prose-paper blockquote {
    border-left: 3px solid var(--line-strong);
    padding-left: 1em;
    color: var(--fg-muted);
    margin: 0 0 1em;
  }
  .prose-paper table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    margin: 0 0 1em;
  }
  .prose-paper th,
  .prose-paper td {
    border-bottom: 1px solid var(--line);
    padding: 0.4em 0.6em;
    text-align: left;
  }
  .prose-paper a {
    color: var(--accent);
    text-decoration: underline;
  }
  .table {
    @apply w-full text-sm;
  }
  .table th {
    @apply text-left text-xs font-semibold uppercase tracking-wide py-2 pr-4;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--line-strong);
  }
  .table td {
    @apply py-2 pr-4 align-top;
    border-bottom: 1px solid var(--line);
  }
  .skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    background: var(--accent);
    color: var(--accent-fg);
    padding: 0.5rem 1rem;
    border-radius: 0 0 0.5rem 0;
  }
  .skip-link:focus {
    left: 0;
  }
  .rule {
    height: 1px;
    background: var(--line);
  }
  .badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide;
    border: 1px solid var(--line-strong);
    color: var(--fg-muted);
  }
}