@import "tailwindcss";

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

@theme {
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --color-bg: var(--bg);
  --color-bg-2: var(--bg-2);
  --color-bg-3: var(--bg-3);
  --color-fg: var(--fg);
  --color-fg-2: var(--fg-2);
  --color-fg-3: var(--fg-3);
  --color-line: var(--line);
  --color-line-2: var(--line-2);
  --color-accent: var(--accent);
  --color-accent-2: var(--accent-2);
  --color-accent-fg: var(--accent-fg);
  --color-ok: var(--ok);
  --color-warn: var(--warn);
  --color-bad: var(--bad);
  --color-info: var(--info);

  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
  --shadow-lift: 0 2px 6px rgb(0 0 0 / 0.06), 0 20px 40px -20px rgb(0 0 0 / 0.25);
}

:root {
  color-scheme: light;
  --bg: #faf8f4;          /* warm paper */
  --bg-2: #ffffff;
  --bg-3: #f1ede6;
  --fg: #1a1a1f;
  --fg-2: #454450;
  --fg-3: #605e6a;
  --line: #e6e1d8;
  --line-2: #d6d0c4;
  --accent: #0f6e63;      /* deep teal */
  --accent-2: #b8611c;    /* amber */
  --accent-fg: #ffffff;
  --ok: #166a41;
  --warn: #8f5612;
  --bad: #a52a29;
  --info: #27569a;
}
.dark {
  color-scheme: dark;
  --bg: #0f1115;           /* ink */
  --bg-2: #161922;
  --bg-3: #1d212c;
  --fg: #ecebe6;
  --fg-2: #b4b2ab;
  --fg-3: #a4a4a0;
  --line: #262a35;
  --line-2: #343946;
  --accent: #3fc0ad;
  --accent-2: #e5a260;
  --accent-fg: #0b1512;
  --ok: #4fc98b;
  --warn: #e0a95a;
  --bad: #ef7b7a;
  --info: #7aa7ec;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
body { @apply bg-bg text-fg font-sans antialiased; font-feature-settings: "ss01", "cv11", "liga"; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: 0.75rem; top: -3rem; z-index: 100; padding: 0.5rem 0.75rem; background: var(--accent); color: var(--accent-fg); border-radius: 0.5rem; }
.skip-link:focus { top: 0.75rem; }

/* fluid type */
.display { font-family: var(--font-display); letter-spacing: -0.01em; font-weight: 500; }
.h-display { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1.02; }
.h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.1; }
.h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }

/* prose for descriptions */
.prose-tool { @apply text-[1.02rem] leading-[1.7] text-fg-2; }
.prose-tool p + p { margin-top: 1rem; }
.prose-tool a { @apply text-accent underline decoration-accent/40 underline-offset-4 hover:decoration-accent; }
.prose-tool code { @apply rounded bg-bg-3 px-1.5 py-0.5 font-mono text-[0.9em] text-fg; }
.prose-tool ul { @apply my-3 list-disc pl-5; } .prose-tool ol { @apply my-3 list-decimal pl-5; } .prose-tool li + li { margin-top: 0.25rem; }
.prose-tool h3, .prose-tool h4 { @apply mt-6 mb-2 font-semibold text-fg; }
.prose-tool strong { @apply font-semibold text-fg; }

/* cards & controls (as @utility so they can be composed with @apply and variants) */
@utility card { @apply rounded-2xl border border-line bg-bg-2 shadow-soft transition-[transform,box-shadow,border-color] duration-200 motion-safe:hover:-translate-y-0.5 hover:shadow-lift hover:border-line-2; }
@utility chip { @apply inline-flex items-center gap-1 rounded-full border border-line bg-bg-3/60 px-2.5 py-0.5 text-xs font-medium text-fg-2; }
@utility chip-accent { @apply border-accent/30 bg-accent/10 text-accent; }
@utility btn { @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none; }
@utility btn-primary { @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-accent text-accent-fg hover:bg-accent/90; }
@utility btn-ghost { @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none border border-line bg-bg-2 text-fg hover:bg-bg-3; }
@utility input { @apply w-full rounded-xl border border-line bg-bg-2 px-3.5 py-2.5 text-[0.95rem] text-fg placeholder:text-fg-3 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25; }
@utility label { @apply mb-1 block text-xs font-semibold uppercase tracking-wider text-fg-3; }
@utility kbd { @apply inline-flex h-5 min-w-5 items-center justify-center rounded border border-line bg-bg-3 px-1 font-mono text-[10px] text-fg-3; }
@utility eyebrow { @apply text-[0.72rem] font-semibold uppercase tracking-[0.14em] text-fg-3; }
.table { @apply w-full border-collapse text-sm; } .table th { @apply sticky top-0 bg-bg-2 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-fg-3; } .table td { @apply border-t border-line px-3 py-2 align-top; }

/* animations */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.45s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: 60ms; } .rise-2 { animation-delay: 120ms; } .rise-3 { animation-delay: 180ms; }
.grain { background-image: radial-gradient(color-mix(in oklab, var(--accent) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px; }