spb/tools-spboucher-ai

1@import "tailwindcss";23@custom-variant dark (&:where(.dark, .dark *));45@theme {6  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;7  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;8  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;910  --color-bg: var(--bg);11  --color-bg-2: var(--bg-2);12  --color-bg-3: var(--bg-3);13  --color-fg: var(--fg);14  --color-fg-2: var(--fg-2);15  --color-fg-3: var(--fg-3);16  --color-line: var(--line);17  --color-line-2: var(--line-2);18  --color-accent: var(--accent);19  --color-accent-2: var(--accent-2);20  --color-accent-fg: var(--accent-fg);21  --color-ok: var(--ok);22  --color-warn: var(--warn);23  --color-bad: var(--bad);24  --color-info: var(--info);2526  --radius-xl: 1rem;27  --radius-2xl: 1.25rem;28  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);29  --shadow-lift: 0 2px 6px rgb(0 0 0 / 0.06), 0 20px 40px -20px rgb(0 0 0 / 0.25);30}3132:root {33  color-scheme: light;34  --bg: #faf8f4;          /* warm paper */35  --bg-2: #ffffff;36  --bg-3: #f1ede6;37  --fg: #1a1a1f;38  --fg-2: #454450;39  --fg-3: #605e6a;40  --line: #e6e1d8;41  --line-2: #d6d0c4;42  --accent: #0f6e63;      /* deep teal */43  --accent-2: #b8611c;    /* amber */44  --accent-fg: #ffffff;45  --ok: #166a41;46  --warn: #8f5612;47  --bad: #a52a29;48  --info: #27569a;49}50.dark {51  color-scheme: dark;52  --bg: #0f1115;           /* ink */53  --bg-2: #161922;54  --bg-3: #1d212c;55  --fg: #ecebe6;56  --fg-2: #b4b2ab;57  --fg-3: #a4a4a0;58  --line: #262a35;59  --line-2: #343946;60  --accent: #3fc0ad;61  --accent-2: #e5a260;62  --accent-fg: #0b1512;63  --ok: #4fc98b;64  --warn: #e0a95a;65  --bad: #ef7b7a;66  --info: #7aa7ec;67}6869html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }70@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; } }71body { @apply bg-bg text-fg font-sans antialiased; font-feature-settings: "ss01", "cv11", "liga"; text-rendering: optimizeLegibility; }72::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); }73:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }74.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; }75.skip-link:focus { top: 0.75rem; }7677/* fluid type */78.display { font-family: var(--font-display); letter-spacing: -0.01em; font-weight: 500; }79.h-display { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1.02; }80.h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.1; }81.h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }8283/* prose for descriptions */84.prose-tool { @apply text-[1.02rem] leading-[1.7] text-fg-2; }85.prose-tool p + p { margin-top: 1rem; }86.prose-tool a { @apply text-accent underline decoration-accent/40 underline-offset-4 hover:decoration-accent; }87.prose-tool code { @apply rounded bg-bg-3 px-1.5 py-0.5 font-mono text-[0.9em] text-fg; }88.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; }89.prose-tool h3, .prose-tool h4 { @apply mt-6 mb-2 font-semibold text-fg; }90.prose-tool strong { @apply font-semibold text-fg; }9192/* cards & controls (as @utility so they can be composed with @apply and variants) */93@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; }94@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; }95@utility chip-accent { @apply border-accent/30 bg-accent/10 text-accent; }96@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; }97@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; }98@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; }99@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; }100@utility label { @apply mb-1 block text-xs font-semibold uppercase tracking-wider text-fg-3; }101@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; }102@utility eyebrow { @apply text-[0.72rem] font-semibold uppercase tracking-[0.14em] text-fg-3; }103.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; }104105/* animations */106@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }107.rise { animation: rise 0.45s cubic-bezier(.2,.7,.2,1) both; }108.rise-1 { animation-delay: 60ms; } .rise-2 { animation-delay: 120ms; } .rise-3 { animation-delay: 180ms; }109.grain { background-image: radial-gradient(color-mix(in oklab, var(--accent) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px; }110