/* tokens.css: Evil ASF design tokens (Lilac & Co., 2026-10-23). Owner: skeleton builder. Night is the default. Day shift = html[data-theme="day"]. With no saved choice, the inline head script in templates follows prefers-color-scheme (light -> day) and falls back to night. Never pure #000 / #fff pages. Contrast (WCAG 2 formula, checked 2026-10-23; AA needs 4.5:1 for text, 3:1 for large text and UI edges) --------------------------------------------------------------------------------------------------------- NIGHT on --bg #0E0C0A on --surface #1A1612 on --surface-2 #241E18 --text #EADFC8 14.77 13.61 12.47 --text-2 #BFAF93 9.08 8.37 7.67 --text-3 #A39378 6.51 6.00 5.50 --link #F4B04A 10.37 9.56 --focus #FFC25A 12.19 11.24 --brand #FF6F1A 7.01 (logo/cat colour; rare highlights only) --on-amber #1A1208 on --amber #F0A62C 8.99, on --amber-hi #FFC25A 11.57 --manila-ink #2B1F0E on --manila #D8B878 8.46 plate text #EADFC8 on --plate #120F0C (opaque core of title plates) 14.45 label chips on --surface: documented #8CC79A 9.21, contested #E9BC62 10.14, unresolved #9DBDE6 9.30, speculative #D2A9E0 8.99, --blood-text #FF5A6E 5.94 DAY SHIFT on --bg #F2E8D5 on --surface #FAF3E4 on --surface-3 #E6D7BA --text #1F1A14 14.21 15.63 12.16 --text-2 #4E4232 8.04 8.84 6.88 --text-3 #62533E 6.11 6.72 5.23 --link #8A4600 5.84 6.43 --focus #8A4600 5.84 --on-amber #1F1A14 on --amber #F0A62C 8.38 --manila-ink #2B1F0E on --manila #D8B878 8.46 plate text stays night-cream on the dark plate in both themes (14.45): plates sit over art, art is dark-edged. label chips on --surface: documented #2F6B3C 5.78, contested #7A4E00 6.51, unresolved #2B5A8C 6.46, speculative #6E3C82 7.22, --blood-text #A30D26 7.19 */ /* Merge pass: Pixelify Sans draws 2 and 5 like 8 and S ("$15" read as "$18", "25" as "28"). "EAF Num" is Silkscreen, the label face, limited to the digits and $, so every number in a pixel title or price is unambiguous. One regular weight for every title weight: the bold cut turns 0 into a solid block at price sizes. Same Google Fonts files the page already loads; if they fail, Pixelify takes over. */ @font-face { font-family: "EAF Num"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/silkscreen/v6/m8JXjfVPf62XiF7kO-i9YLNlaw.woff2) format("woff2"); unicode-range: U+0024, U+0030-0039; } :root { color-scheme: dark; /* surfaces (night) */ --bg: #0E0C0A; --bg-2: #13100D; /* alternate section band */ --surface: #1A1612; /* cards, message plates, sidebar */ --surface-2: #241E18; /* raised: menus, inputs */ --surface-3: #2E261E; /* hover, selected rows */ --border: #3A3026; --border-strong: #5A4A38; --edge: #050403; /* the dark pixel outline around buttons and plates */ --shade: rgb(0 0 0 / 0.45); /* text */ --heading: #F5EBD6; --text: #EADFC8; --text-2: #BFAF93; --text-3: #A39378; --link: #F4B04A; /* brand */ --brand: #FF6F1A; /* cat orange: logo, cat, rare highlights */ --amber: #F0A62C; /* primary button fill */ --amber-hi: #FFC25A; --amber-lo: #B8741A; /* button depth step */ --on-amber: #1A1208; --blood: #C8102E; /* drips and demon mode only */ --blood-text: #FF5A6E; --redact: #0A0908; /* redaction bars */ --redact-edge: #3A3026; /* manila case files */ --manila: #D8B878; --manila-2: #C49E58; --manila-3: #E9D29C; --manila-edge: #7A5A24; --manila-ink: #2B1F0E; --highlight: rgb(255 214 64 / 0.55); /* quoted lines on a document */ /* claim labels */ --lab-documented: #8CC79A; --lab-contested: #E9BC62; --lab-unresolved: #9DBDE6; --lab-speculative: #D2A9E0; /* plates and scrims over art (same in both themes: art bands are dark at the edges) */ --plate: #120F0C; --plate-a: rgb(18 15 12 / 0.92); --plate-text: #EADFC8; --plate-text-2: #CDBFA5; --scrim: rgb(8 6 5 / 0.62); --focus: #FFC25A; /* type */ --font-title: "EAF Num", "Pixelify Sans", "Silkscreen", ui-monospace, monospace; --font-label: "Silkscreen", "Pixelify Sans", ui-monospace, monospace; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-hero: clamp(40px, 5.4vw, 68px); --fs-title: clamp(34px, 4.4vw, 56px); --fs-h2: clamp(28px, 3.2vw, 40px); --fs-h3: 22px; --fs-lead: 19px; --fs-body: 17px; --fs-chat: 16px; --fs-small: 14px; --fs-label: 12px; /* absolute minimum anywhere */ /* spacing (4 px base) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --gutter: 16px; --content: 1200px; --measure: 66ch; /* the pixel: UI chrome is drawn in whole 3 px steps */ --px: 3px; --target: 44px; /* motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms; --header-h: 64px; --tabbar-h: 68px; } @media (min-width: 700px) { :root { --gutter: 24px; } } @media (min-width: 1100px) { :root { --gutter: 40px; } } /* ---------- DAY SHIFT ---------- */ :root[data-theme="day"] { color-scheme: light; --bg: #F2E8D5; --bg-2: #EADDC4; --surface: #FAF3E4; --surface-2: #FFF9EE; --surface-3: #E6D7BA; --border: #CDB993; --border-strong: #A88E62; --edge: #2A2117; --shade: rgb(74 52 24 / 0.22); --heading: #17120C; --text: #1F1A14; --text-2: #4E4232; --text-3: #62533E; --link: #8A4600; --amber-lo: #B8741A; --on-amber: #1F1A14; --blood-text: #A30D26; --redact: #14110D; --redact-edge: #3A3026; --highlight: rgb(255 196 0 / 0.45); --lab-documented: #2F6B3C; --lab-contested: #7A4E00; --lab-unresolved: #2B5A8C; --lab-speculative: #6E3C82; --focus: #8A4600; } /* reduced motion: chosen in Settings (html[data-motion="reduce"]) or by the system */ :root[data-motion="reduce"] { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; } }