spb/autoscholar

1@import "tailwindcss";23@custom-variant dark (&:where(.dark, .dark *));45@theme {6  --font-serif: var(--font-source-serif), "Iowan Old Style", "Palatino Linotype", Georgia, serif;7  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;8  --font-mono: var(--font-jetbrains), ui-monospace, SFMono-Regular, Menlo, monospace;910  --color-ivory-50: #fdfcf9;11  --color-ivory-100: #f8f5ee;12  --color-ivory-200: #efe9dc;13  --color-stone-100: #e8e4da;14  --color-stone-200: #d6d0c3;15  --color-stone-300: #b9b2a3;16  --color-stone-400: #8f887a;17  --color-stone-500: #6b6557;18  --color-stone-600: #4e4a40;19  --color-ink-700: #35322b;20  --color-ink-800: #24221d;21  --color-ink-900: #171612;22  --color-ink-950: #0f0e0c;23  --color-accent-400: #c0613a;24  --color-accent-500: #a84f2a;25  --color-accent-600: #8d401f;26  --color-accent-700: #6f3217;27  --color-ok-500: #2f6f4e;28  --color-warn-500: #9a6b12;29  --color-danger-500: #a2342f;30  --color-info-500: #2f5a8a;31}3233:root {34  --bg: var(--color-ivory-50);35  --bg-elev: #ffffff;36  --bg-muted: var(--color-ivory-100);37  --fg: var(--color-ink-900);38  --fg-muted: var(--color-stone-500);39  --fg-subtle: var(--color-stone-500);40  --line: var(--color-stone-200);41  --line-strong: var(--color-stone-300);42  --accent: var(--color-accent-500);43  --accent-fg: #ffffff;44  --ring: var(--color-accent-500);45  color-scheme: light;46}4748.dark {49  --bg: var(--color-ink-950);50  --bg-elev: var(--color-ink-900);51  --bg-muted: var(--color-ink-800);52  --fg: var(--color-ivory-100);53  --fg-muted: var(--color-stone-300);54  --fg-subtle: var(--color-stone-400);55  --line: #2e2b25;56  --line-strong: #46423a;57  --accent: #d47a52;58  --accent-fg: var(--color-ink-950);59  --ring: #d47a52;60  color-scheme: dark;61}6263@layer base {64  html {65    background: var(--bg);66    color: var(--fg);67    font-family: var(--font-sans);68    -webkit-font-smoothing: antialiased;69    text-rendering: optimizeLegibility;70    scroll-behavior: smooth;71  }72  @media (prefers-reduced-motion: reduce) {73    html {74      scroll-behavior: auto;75    }76    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion must win over component transitions */77    *,78    *::before,79    *::after {80      animation-duration: 0.001ms;81      transition-duration: 0.001ms;82    }83  }84  body {85    min-height: 100dvh;86  }87  ::selection {88    background: color-mix(in oklab, var(--accent) 25%, transparent);89  }90  :focus-visible {91    outline: 2px solid var(--ring);92    outline-offset: 2px;93    border-radius: 2px;94  }95  h1,96  h2,97  h3,98  .serif {99    font-family: var(--font-serif);100    letter-spacing: -0.01em;101  }102  a {103    text-underline-offset: 3px;104  }105  code,106  kbd,107  pre {108    font-family: var(--font-mono);109  }110}111112@layer components {113  .container-x {114    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;115  }116  .surface {117    background: var(--bg-elev);118    border: 1px solid var(--line);119    border-radius: 0.75rem;120  }121  .muted {122    color: var(--fg-muted);123  }124  .subtle {125    color: var(--fg-subtle);126  }127  .hairline {128    border-color: var(--line);129  }130  .btn {131    @apply inline-flex items-center justify-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium transition-colors;132    border: 1px solid var(--line-strong);133    background: var(--bg-elev);134    color: var(--fg);135  }136  .btn:hover {137    background: var(--bg-muted);138  }139  .btn:disabled {140    opacity: 0.5;141    cursor: not-allowed;142  }143  .btn-primary {144    background: var(--accent);145    color: var(--accent-fg);146    border-color: transparent;147  }148  .btn-primary:hover {149    background: color-mix(in oklab, var(--accent) 88%, black);150  }151  .btn-danger {152    color: var(--color-danger-500);153    border-color: color-mix(in oklab, var(--color-danger-500) 40%, transparent);154  }155  .btn-sm {156    @apply px-2.5 py-1.5 text-xs;157  }158  .input {159    @apply w-full rounded-md px-3 py-2 text-sm;160    background: var(--bg-elev);161    border: 1px solid var(--line-strong);162    color: var(--fg);163  }164  .input:focus {165    border-color: var(--accent);166  }167  .label {168    @apply block text-xs font-medium uppercase tracking-wide;169    color: var(--fg-muted);170  }171  .eyebrow {172    @apply text-xs font-semibold uppercase tracking-[0.14em];173    color: var(--accent);174  }175  .prose-paper {176    font-family: var(--font-serif);177    font-size: 1.0625rem;178    line-height: 1.7;179  }180  .prose-paper p {181    margin: 0 0 1em;182  }183  .prose-paper h1,184  .prose-paper h2,185  .prose-paper h3 {186    margin: 1.5em 0 0.5em;187    line-height: 1.25;188  }189  .prose-paper h1 {190    font-size: 1.6rem;191  }192  .prose-paper h2 {193    font-size: 1.3rem;194  }195  .prose-paper h3 {196    font-size: 1.1rem;197  }198  .prose-paper ul,199  .prose-paper ol {200    padding-left: 1.4em;201    margin: 0 0 1em;202  }203  .prose-paper li {204    margin: 0.25em 0;205  }206  .prose-paper code {207    font-family: var(--font-mono);208    font-size: 0.85em;209    background: var(--bg-muted);210    padding: 0.1em 0.35em;211    border-radius: 4px;212  }213  .prose-paper pre {214    background: var(--bg-muted);215    padding: 1em;216    border-radius: 8px;217    overflow: auto;218    font-size: 0.85rem;219    line-height: 1.5;220  }221  .prose-paper pre code {222    background: none;223    padding: 0;224  }225  .prose-paper blockquote {226    border-left: 3px solid var(--line-strong);227    padding-left: 1em;228    color: var(--fg-muted);229    margin: 0 0 1em;230  }231  .prose-paper table {232    border-collapse: collapse;233    width: 100%;234    font-family: var(--font-sans);235    font-size: 0.9rem;236    margin: 0 0 1em;237  }238  .prose-paper th,239  .prose-paper td {240    border-bottom: 1px solid var(--line);241    padding: 0.4em 0.6em;242    text-align: left;243  }244  .prose-paper a {245    color: var(--accent);246    text-decoration: underline;247  }248  .table {249    @apply w-full text-sm;250  }251  .table th {252    @apply text-left text-xs font-semibold uppercase tracking-wide py-2 pr-4;253    color: var(--fg-muted);254    border-bottom: 1px solid var(--line-strong);255  }256  .table td {257    @apply py-2 pr-4 align-top;258    border-bottom: 1px solid var(--line);259  }260  .skip-link {261    position: absolute;262    left: -999px;263    top: 0;264    z-index: 100;265    background: var(--accent);266    color: var(--accent-fg);267    padding: 0.5rem 1rem;268    border-radius: 0 0 0.5rem 0;269  }270  .skip-link:focus {271    left: 0;272  }273  .rule {274    height: 1px;275    background: var(--line);276  }277  .badge {278    @apply inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide;279    border: 1px solid var(--line-strong);280    color: var(--fg-muted);281  }282}283