/* tokens.css — design tokens: palette, font, type axes, theme switching. Loaded first by gastropod.css; every component reads from here. Brand adjustments (palette tweaks, new tokens) live in this one file. */ @font-face { font-family: "Recursive"; src: url("/static/fonts/Recursive_VF.woff2") format("woff2-variations"); font-weight: 300 1000; font-display: swap; font-style: oblique 0deg -15deg; } :root { --paper: #fbfcf9; /* warm white */ --ink: #16160f; /* near-black */ --grey: #5f5f57; /* secondary text */ --faint: #73716a; /* tertiary — >=4.5:1 on paper (WCAG 1.4.3) */ --hair: #cfcfc6; /* hairline rule (decorative separators) */ --field-border: #8c8a81; /* form-control border — >=3:1 on paper (WCAG 1.4.11) */ --surface: #f6f6f1; /* panel / box fill */ --surface-2: #f2f2ec; /* hover fill */ /* Fixed dark ink for text on an always-light accent fill (e.g. the ochre warning chip). Does NOT flip in dark mode, so the text stays legible on the light background regardless of theme. */ --ink-on-accent: #16160f; /* Brand drawing palette. These tokens exist for the pic language and anything pic produces (logo, hero backsplashes, marketing artwork, empty states). Ochre additionally serves as the single chrome accent (bundled chip, verified glyph, focus marks); the other three are pic-only and shouldn't appear in general UI chrome. */ --sage: #7a8f7e; --lavender: #c8b8d8; --ochre: #d8a24b; --sand-beige: #e6d8c6; color-scheme: light; --mono: "MONO" 1, "CASL" 0, "slnt" 0, "CRSV" 0; --prose:"MONO" 0, "CASL" 0, "slnt" 0, "CRSV" 0.5; } /* Dark mode: an inverted, still-warm paper/ink palette. A no-flash inline script sets data-theme on before paint (system preference unless overridden), so only the attribute selector is needed — no media-query duplication. */ :root[data-theme="dark"] { --paper: #15140f; /* warm near-black */ --ink: #ece9df; /* warm off-white */ --grey: #a39e90; --faint: #888270; /* tertiary — >=4.5:1 on paper (WCAG 1.4.3) */ --hair: #36352c; --field-border: #6f6b5f; /* form-control border — >=3:1 on paper (WCAG 1.4.11) */ --surface: #1e1d16; --surface-2: #26251c; /* Brand drawing palette — dark theme. Distinctly brighter and more saturated than the light-theme values so they glow against the warm-near-black paper like pastel pencil marks, instead of fading into muted gray smudges. Sand-beige stays a warm dark fill (a tint of the paper, not an accent). */ --sage: #a3c4a9; --lavender: #d3bee6; --ochre: #e8b35a; --sand-beige: #322c1f; color-scheme: dark; } /* the B&W line-art assets are hard-inked; invert them so they read on dark. */ :root[data-theme="dark"] img.logo, :root[data-theme="dark"] .shell, :root[data-theme="dark"] .ico, :root[data-theme="dark"] .theme-toggle img, :root[data-theme="dark"] .error-page .sadface, :root[data-theme="dark"] .splash::before, :root[data-theme="dark"] .hero::before, :root[data-theme="dark"] .sec-band::before { filter: invert(1) hue-rotate(180deg); } /* One-time token-secret panel: the just-issued secret with an htmx-native dismiss (hx-get /_close, hx-swap delete). The pic close glyph inherits the current text color (color=ink -> currentColor), so it tracks the theme without a dark-mode override. */ .token-secret { position: relative; } .token-secret p { margin-right: 1.6rem; } /* clear the dismiss control */ .token-secret-dismiss { position: absolute; top: .35rem; right: .35rem; background: none; border: 0; padding: .15rem; margin: 0; line-height: 0; cursor: pointer; color: inherit; opacity: .65; } .token-secret-dismiss:hover { opacity: 1; } .token-secret-dismiss svg { width: 18px; height: 18px; display: block; }