/*
 * TireFire Industries — kan re-skin (light + dark)
 * Injected over stock kanbn/kan by the ops/kan nginx sub_filter sidecar
 * (<link> -> https://cairn.tirefireind.us/v1/ns/tfi/kan.css). Source of truth:
 * ops/kan/skin/kan.css (GENERATED by .claude/tmp/.../gen_skin.py). Republish:
 *   tools/cairn-upload.sh tfi kan.css ops/kan/skin/kan.css
 *
 * kan toggles html.light / html.dark from prefers-color-scheme. We remap kan's
 * `light-*` neutral ramp (bg/text/border + dark: variants) to TFI tones, swap
 * the type system to mono-first JetBrains Mono / Hanken display, and apply brand
 * orange/blue accents. Fonts self-hosted on cairn (CORS-enabled).
 */

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('https://cairn.tirefireind.us/v1/ns/tfi/fonts/jetbrains-mono-latin.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:400 800; font-display:swap;
  src:url('https://cairn.tirefireind.us/v1/ns/tfi/fonts/jetbrains-mono-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('https://cairn.tirefireind.us/v1/ns/tfi/fonts/hanken-grotesk-latin.woff2') format('woff2'); }

:root {
  --font-mono:'JetBrains Mono','Menlo','Consolas','DejaVu Sans Mono',ui-monospace,monospace;
  --font-display:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tfi-orange:#ca4f1f; --tfi-red:#bb2d2e; --tfi-blue:#288bc2; --tfi-yellow:#eeb922;
  --tfi-cream:#f5f9ef; --tfi-white:#f4f8ee; --tfi-black:#171426;
}

/* ── Type: mono-first UI, display titles ─────────────────────────── */
html, body, button, input, textarea, select,
[class*="font-"], h2,h3,h4,h5,h6, p, span, a, div, li, td, th { font-family: var(--font-mono); }
h1, .text-2xl, .text-xl { font-family: var(--font-display); letter-spacing:-0.01em; }
body { font-weight: 450; }
.font-normal { font-weight: 450; } .font-medium { font-weight: 550; }

/* ── bg ramp -> TFI (light + dark) ─────────────── */
html.light .bg-light-50{background-color:#f5f9ef !important;}
html.light .bg-light-100{background-color:#f4f8ee !important;}
html.light .bg-light-200{background-color:#ecf1e2 !important;}
html.light .bg-light-300{background-color:#e4e7dc !important;}
html.light .bg-light-400{background-color:#d4d6cc !important;}
html.light .bg-light-500{background-color:#bdbeb7 !important;}
html.light .bg-light-600{background-color:#a4a49e !important;}
html.light .bg-light-700{background-color:#6a658b !important;}
html.light .bg-light-800{background-color:#494567 !important;}
html.light .bg-light-900{background-color:#26233a !important;}
html.light .bg-light-950{background-color:#1e1b33 !important;}
html.light .bg-light-1000{background-color:#17142a !important;}
html.dark .dark\:bg-dark-50{background-color:#17142a !important;}
html.dark .dark\:bg-dark-100{background-color:#26233a !important;}
html.dark .dark\:bg-dark-200{background-color:#2a2742 !important;}
html.dark .dark\:bg-dark-300{background-color:#2d2a47 !important;}
html.dark .dark\:bg-dark-400{background-color:#3a3656 !important;}
html.dark .dark\:bg-dark-500{background-color:#3f3b5c !important;}
html.dark .dark\:bg-dark-600{background-color:#494567 !important;}
html.dark .dark\:bg-dark-700{background-color:#5a557a !important;}
html.dark .dark\:bg-dark-800{background-color:#6a658b !important;}
html.dark .dark\:bg-dark-900{background-color:#76708e !important;}
html.dark .dark\:bg-dark-950{background-color:#8782a0 !important;}
html.dark .dark\:bg-dark-1000{background-color:#e2dfec !important;}

/* ── text ramp -> TFI (light + dark) ─────────────── */
html.light .text-light-50{color:#f5f9ef !important;}
html.light .text-light-100{color:#eef2e6 !important;}
html.light .text-light-200{color:#d3cfe0 !important;}
html.light .text-light-300{color:#afaac2 !important;}
html.light .text-light-400{color:#8782a0 !important;}
html.light .text-light-500{color:#6a658b !important;}
html.light .text-light-600{color:#5a557a !important;}
html.light .text-light-700{color:#494567 !important;}
html.light .text-light-800{color:#3a3656 !important;}
html.light .text-light-900{color:#26233a !important;}
html.light .text-light-950{color:#201d33 !important;}
html.light .text-light-1000{color:#17142a !important;}
html.dark .dark\:text-dark-50{color:#26233a !important;}
html.dark .dark\:text-dark-100{color:#3a3656 !important;}
html.dark .dark\:text-dark-200{color:#494567 !important;}
html.dark .dark\:text-dark-300{color:#5a557a !important;}
html.dark .dark\:text-dark-400{color:#6a658b !important;}
html.dark .dark\:text-dark-500{color:#76708e !important;}
html.dark .dark\:text-dark-600{color:#8782a0 !important;}
html.dark .dark\:text-dark-700{color:#9d98b1 !important;}
html.dark .dark\:text-dark-800{color:#afaac2 !important;}
html.dark .dark\:text-dark-900{color:#c2bed2 !important;}
html.dark .dark\:text-dark-950{color:#d3cfe0 !important;}
html.dark .dark\:text-dark-1000{color:#e2dfec !important;}

/* ── border ramp -> TFI (light + dark) ─────────────── */
html.light .border-light-50{border-color:#ecf1e2 !important;}
html.light .border-light-100{border-color:#e4e7dc !important;}
html.light .border-light-200{border-color:#dcdfd2 !important;}
html.light .border-light-300{border-color:#cacbca !important;}
html.light .border-light-400{border-color:#bcbdb6 !important;}
html.light .border-light-500{border-color:#a4a49e !important;}
html.light .border-light-600{border-color:#8782a0 !important;}
html.light .border-light-700{border-color:#6a658b !important;}
html.light .border-light-800{border-color:#494567 !important;}
html.light .border-light-900{border-color:#26233a !important;}
html.light .border-light-1000{border-color:#17142a !important;}
html.dark .dark\:border-dark-50{border-color:#1e1b33 !important;}
html.dark .dark\:border-dark-100{border-color:#232040 !important;}
html.dark .dark\:border-dark-200{border-color:#2a2742 !important;}
html.dark .dark\:border-dark-300{border-color:#2d2a47 !important;}
html.dark .dark\:border-dark-400{border-color:#3a3656 !important;}
html.dark .dark\:border-dark-500{border-color:#3f3b5c !important;}
html.dark .dark\:border-dark-600{border-color:#494567 !important;}
html.dark .dark\:border-dark-700{border-color:#5a557a !important;}
html.dark .dark\:border-dark-800{border-color:#6a658b !important;}
html.dark .dark\:border-dark-900{border-color:#76708e !important;}
html.dark .dark\:border-dark-1000{border-color:#e2dfec !important;}

/* ── Page background: cream (light) / steel (dark) ───────────────── */
html.light, html.light body { background-color: var(--tfi-cream) !important; }
html.dark,  html.dark body  { background-color: #17142a !important; }

/* ── Brand accents ───────────────────────────────────────────────── */
/* Links blue, heating to orange. */
a:not([class*="bg-"]) { color: var(--tfi-blue) !important; }
a:not([class*="bg-"]):hover { color: var(--tfi-orange) !important; }

/* Primary CTAs. Light mode: kan renders them dark (bg-light-1000 / black).
   Dark mode: kan renders them light (dark:bg-dark-1000). Repaint both to brand
   orange with light text. */
html.light button.bg-light-1000, html.light a.bg-light-1000, html.light button[class*="bg-black"],
html.dark button.dark\:bg-dark-1000, html.dark a.dark\:bg-dark-1000 {
  background-color: var(--tfi-orange) !important; color: var(--tfi-white) !important;
}
html.light button.bg-light-1000:hover, html.light a.bg-light-1000:hover,
html.dark button.dark\:bg-dark-1000:hover,
html.dark a.dark\:bg-dark-1000:hover { background-color: var(--tfi-red) !important; }

/* Orange focus ring. */
*:focus-visible { outline-color: var(--tfi-orange) !important; }


/* ── Body text: black (light) / light-steel (dark) — never grey ──── */
html.light .prose, html.light .prose p, html.light .prose li,
html.light .prose td, html.light .prose strong { color: var(--tfi-black) !important; }
html.dark .prose, html.dark .prose p, html.dark .prose li,
html.dark .prose td, html.dark .prose strong { color: #e2dfec !important; }

/* ── Inline code: normal weight, code-box styled (no backtick pseudo) ── */
.prose :not(pre) > code, .prose code { font-weight: 400 !important; padding: 0.08em 0.4em !important;
  border-radius: 3px !important; border: 1px solid !important; }
.prose code::before, .prose code::after { content: none !important; }
html.light .prose code { background: var(--tfi-white) !important; border-color: #cacbca !important; color: var(--tfi-black) !important; }
html.dark  .prose code { background: #2d2a47 !important; border-color: #494567 !important; color: #e2dfec !important; }
/* fenced blocks: paper/steel panel */
html.light .prose pre { background: var(--tfi-white) !important; border: 1px solid #cacbca !important; color: var(--tfi-black) !important; }
html.dark  .prose pre { background: #1e1b33 !important; border: 1px solid #494567 !important; color: #e2dfec !important; }
.prose pre code { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* ── Headings: brand-coloured with the TFI underline accent ──────── */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--tfi-orange) !important; }
.prose h1 { text-decoration: underline; text-decoration-color: var(--tfi-orange) !important; text-underline-offset: 0.15em; }
.prose h2 { text-decoration: underline; text-decoration-color: var(--tfi-yellow) !important; text-underline-offset: 0.15em; }
/* card title (display h1, may sit outside .prose) */
h1.text-xl, h1.text-2xl { color: var(--tfi-orange) !important; }
/* card title is an editable <textarea> (text-neutral-900 / dark:text-dark-1000);
   scope per mode to out-specify the dark-* ramp. */
html.light textarea.text-neutral-900,
html.dark textarea.dark\:text-dark-1000 { color: var(--tfi-orange) !important; }

/* ── Quotations: the one place muted grey belongs ───────────────── */
.prose blockquote { border-left: 3px solid var(--tfi-yellow) !important; }
html.light .prose blockquote, html.light .prose blockquote p { color: #6f6f6f !important; }
html.dark  .prose blockquote, html.dark .prose blockquote p { color: #8782a0 !important; }

/* Links inside prose -> brand blue, heating to orange. */
.prose a { color: var(--tfi-blue) !important; }
.prose a:hover { color: var(--tfi-orange) !important; }