/* Shared styles for the static prose pages in public/. These pages are plain HTML served straight off Firebase Hosting -- they never pass through Vite, so nothing here can rely on Tailwind or the app bundle. The tokens mirror src/styles/globals.css so the pages read as part of the product rather than as a bolted-on microsite. Both are maintained by hand; if the app's palette moves, this file needs the same edit. Theme resolution matches the app: an explicit choice persisted by the app adds .dark to , and prefers-color-scheme covers everyone else. */ :root { --background: oklch(0.985 0.002 247.839); --foreground: oklch(0.145 0.004 285.823); --card: oklch(1 0 0); --primary: oklch(0.511 0.226 276.966); --muted-foreground: oklch(0.505 0.014 285.938); --border: oklch(0.911 0.006 264.531); --surface: oklch(0.945 0.004 264.542); --radius: 0.5rem; } .dark { --background: oklch(0.175 0.006 285.885); --foreground: oklch(0.965 0.002 247.839); --card: oklch(0.215 0.006 285.885); --primary: oklch(0.673 0.182 276.935); --muted-foreground: oklch(0.712 0.013 286.067); --border: oklch(1 0 0 / 12%); --surface: oklch(0.145 0.005 285.885); } /* Only for visitors who never opened the app, so no .dark class exists yet. */ @media (prefers-color-scheme: dark) { :root:not(.light) { --background: oklch(0.175 0.006 285.885); --foreground: oklch(0.965 0.002 247.839); --card: oklch(0.215 0.006 285.885); --primary: oklch(0.673 0.182 276.935); --muted-foreground: oklch(0.712 0.013 286.067); --border: oklch(1 0 0 / 12%); --surface: oklch(0.145 0.005 285.885); } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } .wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 5rem; } /* Header ------------------------------------------------------------------ */ .site-header { border-bottom: 1px solid var(--border); margin-bottom: 3rem; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; } .brand { font-weight: 700; font-size: 1.125rem; color: var(--foreground); text-decoration: none; letter-spacing: -0.01em; } .cta { display: inline-block; background: var(--primary); color: oklch(1 0 0); text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding: 0.5rem 1rem; border-radius: var(--radius); border: 1px solid transparent; } .cta:hover, .cta:focus-visible { filter: brightness(1.08); } .dark .cta { color: oklch(0.145 0.004 285.823); } /* Typography -------------------------------------------------------------- */ h1 { font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1rem; } h2 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; margin: 3rem 0 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } h3 { font-size: 1.15rem; margin: 2rem 0 0.5rem; } .lede { font-size: 1.2rem; color: var(--muted-foreground); margin: 0 0 2.5rem; } p, li { margin: 0 0 1rem; } ul, ol { padding-left: 1.5rem; } a { color: var(--primary); text-underline-offset: 0.2em; } strong { font-weight: 650; } /* Code -------------------------------------------------------------------- */ code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875em; background: var(--surface); border: 1px solid var(--border); border-radius: 0.3rem; padding: 0.1em 0.35em; } pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; line-height: 1.55; } pre code { background: none; border: 0; padding: 0; font-size: 0.875rem; } /* Tables ------------------------------------------------------------------ */ .table-scroll { overflow-x: auto; margin: 0 0 1.5rem; } table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; } th, td { border: 1px solid var(--border); padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; } th { background: var(--surface); font-weight: 650; } /* Callout ----------------------------------------------------------------- */ .note { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 2rem 0; } .note p:last-child { margin-bottom: 0; } /* Footer ------------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--border); margin-top: 4rem; padding-top: 2rem; font-size: 0.9375rem; color: var(--muted-foreground); } .site-footer h2 { font-size: 1rem; border: 0; margin: 0 0 0.75rem; padding: 0; } .site-footer ul { list-style: none; padding: 0; margin: 0 0 1.5rem; } .site-footer li { margin-bottom: 0.4rem; } img { max-width: 100%; height: auto; }