@import "tailwindcss";

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

/* ───────────────────────────── Design tokens ─────────────────────────────
   Palette: graphite ink · warm ivory · muted stone · oxide accent (terracotta
   evolved toward a deeper, print-like oxide red) · cobalt as the scientific
   secondary for visualizations and interactive states. Light and dark are
   tuned separately (dark is not an inversion). */
@theme {
  --font-serif: var(--font-newsreader), "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: var(--font-geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-ivory-50: #fcfbf7;
  --color-ivory-100: #f6f3eb;
  --color-ivory-200: #ece7da;
  --color-stone-100: #e6e1d6;
  --color-stone-200: #d3ccbd;
  --color-stone-300: #b3aa98;
  --color-stone-400: #8a8273;
  --color-stone-500: #67604f;
  --color-stone-600: #4a453a;
  --color-ink-700: #33302a;
  --color-ink-800: #23211c;
  --color-ink-900: #16150f;
  --color-ink-950: #0d0d0a;
  --color-oxide-400: #c25d33;
  --color-oxide-500: #a84a25;
  --color-oxide-600: #8a3a1a;
  --color-oxide-700: #6b2c12;
  --color-cobalt-400: #4f7fd1;
  --color-cobalt-500: #2f5fb3;
  --color-cobalt-600: #244a8d;
  --color-ok-500: #2f6f4e;
  --color-warn-500: #9a6b12;
  --color-danger-500: #a2342f;
  --color-info-500: #2f5fb3;
  --color-accent-500: #a84a25;

  --breakpoint-xs: 30rem;
}

:root {
  --bg: var(--color-ivory-50);
  --bg-elev: #ffffff;
  --bg-muted: var(--color-ivory-100);
  --bg-sunken: var(--color-ivory-200);
  --fg: var(--color-ink-900);
  --fg-muted: var(--color-stone-500);
  --fg-subtle: #6e6758;
  --line: var(--color-stone-200);
  --line-strong: var(--color-stone-300);
  --accent: var(--color-oxide-500);
  --accent-strong: var(--color-oxide-600);
  --accent-soft: color-mix(in oklab, var(--color-oxide-500) 10%, transparent);
  --accent-fg: #ffffff;
  --sci: var(--color-cobalt-500);
  --sci-soft: color-mix(in oklab, var(--color-cobalt-500) 10%, transparent);
  --ring: var(--color-oxide-500);
  --shadow-1: 0 1px 2px rgb(22 21 15 / 0.05), 0 1px 1px rgb(22 21 15 / 0.03);
  --shadow-2: 0 10px 30px -12px rgb(22 21 15 / 0.18), 0 2px 6px -2px rgb(22 21 15 / 0.06);
  --radius: 0.75rem;
  --header-h: 3.5rem;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

.dark {
  --bg: var(--color-ink-950);
  --bg-elev: #15140f;
  --bg-muted: #1c1b16;
  --bg-sunken: #0a0a08;
  --fg: #efeadf;
  --fg-muted: #b5ac9c;
  --fg-subtle: #87806f;
  --line: #2c2a23;
  --line-strong: #44403a;
  --accent: #d8784d;
  --accent-strong: #e58a60;
  --accent-soft: color-mix(in oklab, #d8784d 14%, transparent);
  --accent-fg: #15140f;
  --sci: #7ea3e6;
  --sci-soft: color-mix(in oklab, #7ea3e6 14%, transparent);
  --ring: #d8784d;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 14px 40px -14px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* ───────────────────────────── Base ───────────────────────────── */
@layer base {
  html {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    overflow-x: clip;
  }
  body {
    min-height: 100dvh;
    overflow-x: clip;
    line-height: 1.55;
  }
  @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 !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
  ::selection {
    background: color-mix(in oklab, var(--accent) 28%, transparent);
  }
  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 3px;
  }
  h1,
  h2,
  h3,
  .serif {
    font-family: var(--font-serif);
    letter-spacing: -0.012em;
    text-wrap: balance;
    font-feature-settings:
      "kern",
      "liga",
      "onum" 0;
  }
  p {
    text-wrap: pretty;
  }
  a {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  a:not([class]) {
    color: var(--accent);
    text-decoration: underline;
  }
  code,
  kbd,
  pre {
    font-family: var(--font-mono);
    font-feature-settings: "liga" 0;
  }
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  summary {
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  table {
    border-collapse: collapse;
  }
  [hidden] {
    display: none;
  }
  /* grid/flex children default to min-width:auto, which lets long mono strings push layouts wider than the viewport */
  .grid > *,
  .flex > * {
    min-width: 0;
  }
  .surface,
  .surface-flat,
  .surface-muted {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ───────────────────────────── Components ───────────────────────────── */
@layer components {
  /* layout */
  .container-x {
    @apply mx-auto w-full max-w-7xl;
    padding-left: max(1rem, var(--safe-l));
    padding-right: max(1rem, var(--safe-r));
  }
  @media (min-width: 40rem) {
    .container-x {
      padding-left: max(1.5rem, var(--safe-l));
      padding-right: max(1.5rem, var(--safe-r));
    }
  }
  @media (min-width: 64rem) {
    .container-x {
      padding-left: max(2.5rem, var(--safe-l));
      padding-right: max(2.5rem, var(--safe-r));
    }
  }
  .container-narrow {
    @apply mx-auto w-full max-w-3xl;
  }
  .container-reading {
    @apply mx-auto w-full max-w-[42rem];
  }
  .section {
    @apply py-12 sm:py-16 lg:py-24;
  }
  .section-tight {
    @apply py-8 sm:py-12 lg:py-16;
  }

  /* type scale (clamp between phone and desktop) */
  .display {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2.125rem, 1.4rem + 3.3vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
  }
  .title-1 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.018em;
  }
  .title-2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
    line-height: 1.18;
  }
  .title-3 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    line-height: 1.3;
  }
  .lede {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
    line-height: 1.55;
    color: var(--fg-muted);
    max-width: 38rem;
    text-wrap: pretty;
  }
  .eyebrow {
    font-family: var(--font-sans);
    @apply text-[11px] font-semibold uppercase tracking-[0.16em];
    color: var(--accent);
  }
  .eyebrow-sci {
    color: var(--sci);
  }
  .label {
    @apply block text-[11px] font-medium uppercase tracking-[0.12em];
    color: var(--fg-subtle);
  }
  .muted {
    color: var(--fg-muted);
  }
  .subtle {
    color: var(--fg-subtle);
  }
  .hairline {
    border-color: var(--line);
  }
  .rule {
    height: 1px;
    background: var(--line);
  }
  .rule-ornament {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--fg-subtle);
  }
  .rule-ornament::before,
  .rule-ornament::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  /* surfaces */
  .surface {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
  }
  .surface-flat {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .surface-muted {
    background: var(--bg-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .surface-ink {
    background: var(--color-ink-900);
    color: #efeadf;
    border-radius: var(--radius);
  }
  .dark .surface-ink {
    background: #0a0a08;
    border: 1px solid var(--line);
  }
  .card-link {
    transition:
      transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
      border-color 220ms;
  }
  @media (hover: hover) {
    .card-link:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-2);
      border-color: var(--line-strong);
    }
  }
  .paper-ruled {
    background-image: linear-gradient(var(--line) 1px, transparent 1px);
    background-size: 100% 1.65rem;
    background-position: 0 0.4rem;
  }

  /* controls — 44px minimum touch targets on coarse pointers */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 text-sm font-medium;
    min-height: 2.5rem;
    border: 1px solid var(--line-strong);
    background: var(--bg-elev);
    color: var(--fg);
    text-decoration: none;
    transition:
      background 150ms,
      border-color 150ms,
      color 150ms,
      transform 150ms;
    white-space: nowrap;
  }
  @media (pointer: coarse) {
    .btn {
      min-height: 2.75rem;
    }
  }
  .btn:hover {
    background: var(--bg-muted);
    border-color: var(--line-strong);
  }
  .btn:active {
    transform: translateY(1px);
  }
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: transparent;
  }
  .btn-primary:hover {
    background: var(--accent-strong);
  }
  .btn-ghost {
    border-color: transparent;
    background: transparent;
  }
  .btn-ghost:hover {
    background: var(--bg-muted);
  }
  .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 text-xs;
    min-height: 2rem;
  }
  @media (pointer: coarse) {
    .btn-sm {
      min-height: 2.5rem;
    }
  }
  .btn-icon {
    @apply inline-flex items-center justify-center rounded-lg;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid transparent;
    color: var(--fg-muted);
    background: transparent;
    transition:
      background 150ms,
      color 150ms;
  }
  .btn-icon:hover {
    background: var(--bg-muted);
    color: var(--fg);
  }
  .input {
    @apply w-full rounded-lg px-3 text-sm;
    min-height: 2.5rem;
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    color: var(--fg);
    transition:
      border-color 150ms,
      box-shadow 150ms;
  }
  @media (pointer: coarse) {
    .input {
      min-height: 2.75rem;
      font-size: 16px; /* avoids iOS zoom on focus */
    }
  }
  .input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  textarea.input {
    min-height: 8rem;
    padding-top: 0.6rem;
    line-height: 1.5;
  }
  select.input {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a8273' stroke-width='1.5' d='M2.5 4.5 6 8l3.5-3.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }
  .chip {
    @apply inline-flex items-center gap-1.5 rounded-full px-3 text-xs font-medium;
    min-height: 2rem;
    border: 1px solid var(--line-strong);
    background: var(--bg-elev);
    color: var(--fg);
    text-decoration: none;
    white-space: nowrap;
  }
  .chip-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
  .badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium uppercase tracking-[0.08em];
    border: 1px solid var(--line-strong);
    color: var(--fg-muted);
    white-space: nowrap;
  }
  .badge-accent {
    border-color: color-mix(in oklab, var(--accent) 45%, transparent);
    color: var(--accent-strong);
    background: var(--accent-soft);
  }
  .badge-sci {
    border-color: color-mix(in oklab, var(--sci) 45%, transparent);
    color: var(--sci);
    background: var(--sci-soft);
  }
  .kbd {
    @apply inline-flex items-center rounded px-1.5 py-0.5 text-[11px];
    border: 1px solid var(--line-strong);
    color: var(--fg-muted);
    font-family: var(--font-mono);
  }
  .mono-id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--fg-muted);
  }

  /* header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: var(--safe-t);
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition:
      border-color 200ms,
      box-shadow 200ms;
  }
  .site-header[data-scrolled="true"] {
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--line) 60%, transparent);
  }
  .nav-link {
    @apply rounded-md px-2.5 py-1.5 text-sm;
    color: var(--fg-muted);
    text-decoration: none;
    transition:
      color 150ms,
      background 150ms;
  }
  .nav-link:hover,
  .nav-link[aria-current="page"] {
    color: var(--fg);
    background: var(--bg-muted);
  }
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--color-ink-950) 45%, transparent);
    backdrop-filter: blur(2px);
    animation: fade-in 180ms ease-out;
  }
  .drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    width: min(22rem, 88vw);
    background: var(--bg);
    border-left: 1px solid var(--line);
    padding: calc(var(--safe-t) + 0.75rem) max(1rem, var(--safe-r)) calc(var(--safe-b) + 1rem) 1rem;
    overflow-y: auto;
    animation: slide-in-right 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: var(--shadow-2);
  }
  .sheet-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    max-height: min(88dvh, 100dvh - var(--safe-t) - 2rem);
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 0.5rem max(1rem, var(--safe-r)) calc(var(--safe-b) + 1rem) max(1rem, var(--safe-l));
    overflow-y: auto;
    animation: slide-in-up 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: var(--shadow-2);
  }
  .sheet-handle {
    width: 2.5rem;
    height: 0.3rem;
    border-radius: 999px;
    background: var(--line-strong);
    margin: 0.25rem auto 0.75rem;
  }

  /* prose for paper content */
  .prose-paper {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    line-height: 1.65;
    font-feature-settings: "kern", "liga";
  }
  .prose-paper p {
    margin: 0 0 1em;
  }
  .prose-paper p:last-child {
    margin-bottom: 0;
  }
  .prose-paper h1,
  .prose-paper h2,
  .prose-paper h3 {
    margin: 1.6em 0 0.5em;
    line-height: 1.2;
    font-weight: 500;
  }
  .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.3em 0;
  }
  .prose-paper code {
    font-family: var(--font-mono);
    font-size: 0.82em;
    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;
  }
  .prose-editorial {
    font-family: var(--font-serif);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.6;
  }
  .prose-editorial p {
    margin: 0 0 1.1em;
  }
  .prose-editorial p:first-of-type::first-letter {
    font-size: 3.1em;
    float: left;
    line-height: 0.82;
    padding: 0.08em 0.1em 0 0;
    font-weight: 500;
    color: var(--accent);
  }
  .dropcap-off p:first-of-type::first-letter {
    all: unset;
  }

  /* math */
  .math-inline,
  .math-display {
    font-size: 1.02em;
  }
  .math-display {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.4rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .math-display .katex-display {
    margin: 0.25rem 0;
  }

  /* tables */
  .table {
    @apply w-full text-sm;
  }
  .table th {
    @apply text-left text-[11px] font-semibold uppercase tracking-[0.1em] py-2 pr-4;
    color: var(--fg-subtle);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
  }
  .table td {
    @apply py-2.5 pr-4 align-top;
    border-bottom: 1px solid var(--line);
  }
  .table tbody tr:hover td {
    background: color-mix(in oklab, var(--bg-muted) 60%, transparent);
  }
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }

  .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;
  }

  /* skeletons */
  .skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-muted);
    border-radius: 6px;
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklab, var(--bg-elev) 70%, transparent),
      transparent
    );
    animation: shimmer 1.4s infinite;
  }

  /* motion */
  .reveal {
    animation: rise-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .reveal-2 {
    animation-delay: 80ms;
  }
  .reveal-3 {
    animation-delay: 160ms;
  }
  .reveal-4 {
    animation-delay: 240ms;
  }

  /* pipeline timeline */
  .pipeline {
    position: relative;
  }
  .pipeline::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 1px;
    background: linear-gradient(var(--line-strong), var(--line) 60%, transparent);
  }
  .pipeline-node {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    border: 1px solid var(--line-strong);
    background: var(--bg-elev);
    color: var(--fg);
    flex: none;
  }
  .pipeline-node[data-tone="worker"] {
    border-color: color-mix(in oklab, var(--sci) 55%, transparent);
    color: var(--sci);
  }
  .pipeline-node[data-tone="control"] {
    border-color: color-mix(in oklab, var(--accent) 55%, transparent);
    color: var(--accent-strong);
  }

  /* sticky action bar on mobile paper page */
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 0.5rem max(1rem, var(--safe-r)) calc(var(--safe-b) + 0.5rem) max(1rem, var(--safe-l));
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-up {
  from {
    transform: translateY(32px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rise-in {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* KaTeX stylesheet is imported from the package in the root layout; dark-mode colours inherit via currentColor. */
.katex {
  color: inherit;
}