/* * ScribbleTod — design tokens. * * Custom properties only. No selectors that paint anything, no element rules: * this file is the vocabulary and `base.css` and `card.css` are the first two * things that speak it. A row that needs a colour or a length reaches for a * token here rather than typing a hex. * * THE PALETTE STARTS FROM THE HOLDING PAGE, deliberately. `holding/index.html` * is already public-facing ScribbleTod and already picked an ink, a paper and * a rule; the app inheriting them is what makes the two look like one product * on launch day, when the apex stops serving one and starts serving the other. * * CONTRAST IS CHECKED, NOT EYEBALLED. `npm run check:tokens` reads this file * and asserts every `--st-tier-*` colour against the ink named for it at * 4.5:1. `docs/RARE-CARDS.md` records why that check exists: on the other * project "a contrast checker reads a gradient as its first colour stop", * which produced a false pass over a real contrast bug. Flat colours are * checkable; the gradient treatments S2a builds on top of these are not, and * have to be judged against their WORST stop by hand. * * No web fonts are fetched, here or anywhere. `holding/README.md`: "no build * step, no JS, no fonts fetched, no analytics", and `docs/DEVICES.md` says the * floor is an old Android — a font is the largest thing a phone would be asked * to download before it can read a card name. */ :root { /* * LIGHT ONLY, AND WHITE. Hendo, 2026-09-04: "change the background to white * on the site", then again the next morning when a page he opened by chance * came up dark. The dark scheme below was keyed to prefers-color-scheme, so * a phone set to dark saw every page of the app inverted -- which is what he * was looking at both times. * * It is not only a preference. Every drawing in this game is marker on WHITE * PAPER, cut out on transparency. On a dark ground each one sits on a grey * card and its cut edge stops reading, which is the whole point of having * cut them. A game made of white-paper drawings is a light-mode game. */ color-scheme: light; /* ---- Ink and paper. The three from holding/index.html, extended. ---- */ --st-paper: #ffffff; --st-surface: #ffffff; --st-surface-sunk: #f4f2ea; --st-ink: #141414; --st-ink-muted: #5b574c; --st-rule: #e3e0d8; --st-rule-strong: #c9c4b6; /* * THE CARD FACE DOES NOT FOLLOW THE COLOUR SCHEME, and that is on purpose. * A trading card is a paper object; the artist's art is black marker line on * transparency and needs something light behind it at any hour. The holding * page can inverse-filter eight drawings on a dark background because it has * no frames; a card cannot, because the frame, the strip and the art would * have to invert together and the tier colour would stop meaning what it * means. So the chrome switches and the card stays paper. */ --st-card-face: #fffdf7; --st-card-face-ink: #141414; --st-card-face-muted: #6b6558; /* ---- Interaction. The brand is black marker and a gold coin. ---- */ --st-accent: #141414; --st-accent-ink: #fdfcf8; --st-focus: #3d8ef0; --st-coin: #f2b418; --st-coin-ink: #141414; /* ---- Semantic. Kept off the tier hues so a win never reads as a tier. ---- */ --st-good: #237a38; --st-good-ink: #ffffff; --st-bad: #c22a1e; --st-bad-ink: #ffffff; --st-warn: #f2b418; --st-warn-ink: #141414; /* * ---- The seven tiers (ASSET-MANIFEST §5). ---- * * "Seven tiers. Colour is the primary signal. Black outline constant across * all tiers." Each carries the ink that goes ON it, because half of these * want black text and half want white, and guessing per component is how a * badge ends up at 2.4:1. * * These are the FLAT colours: badges, chips, filter pills, and the base a * frame is built from. The treatments — mythic's rotating conic gradient and * fire glow, secret's black-and-white chase, the foil sweep — are S2a's and * live in `client/card/`. What S2a inherits from here is the hue, so a * filter chip and a card frame cannot come to disagree about what blue * "rare" is. */ --st-tier-common: #8d8b83; --st-tier-common-ink: #141414; --st-tier-uncommon: #3aa655; --st-tier-uncommon-ink: #141414; --st-tier-rare: #3d8ef0; --st-tier-rare-ink: #141414; --st-tier-epic: #8b46d9; --st-tier-epic-ink: #ffffff; --st-tier-legendary: #f28a20; --st-tier-legendary-ink: #141414; --st-tier-mythic: #ff2f8a; --st-tier-mythic-ink: #141414; --st-tier-secret: #101014; --st-tier-secret-ink: #ffffff; /* * Mythic's rainbow, as stops rather than a finished gradient, so S2a can * feed them to `conic-gradient()` at whatever angle and speed reads right: * background: conic-gradient(var(--st-tier-mythic-sweep)); * The list closes on its first colour so the rotation has no seam. */ --st-tier-mythic-sweep: #ff2f8a, #f28a20, #f2d417, #3aa655, #3d8ef0, #8b46d9, #ff2f8a; /* Secret is a chase, so it needs the two ends of one. */ --st-tier-secret-dark: #101014; --st-tier-secret-light: #f4f4f6; /* ---- Traits (§1.4). VALUE multipliers, never combat (AUDIT Finding 1). ---- */ --st-trait-foil: #7fd8e8; --st-trait-dino: #4faa6b; /* ---- Type. Rounded and friendly, from the holding page; nothing fetched. ---- */ --st-font-display: ui-rounded, 'Segoe UI Rounded', 'SF Pro Rounded', 'Comic Sans MS', system-ui, sans-serif; --st-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* * Numbers only. `docs/DEVICES.md`: "A number column is right-aligned and * tabular-figure ... A table where 1,000 and 900 do not line up at the * decimal is the thing being complained about here." Pair with `.st-num`. */ --st-font-numeric: ui-monospace, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', monospace; --st-text-xs: 0.75rem; --st-text-sm: 0.875rem; --st-text-md: 1rem; --st-text-lg: 1.125rem; --st-text-xl: 1.375rem; --st-text-2xl: 1.75rem; --st-text-3xl: 2.25rem; --st-leading-tight: 1.15; --st-leading-normal: 1.5; --st-weight-regular: 400; --st-weight-medium: 600; --st-weight-bold: 800; /* ---- Space. A 4px step; every gap in the game is one of these. ---- */ --st-space-1: 4px; --st-space-2: 8px; --st-space-3: 12px; --st-space-4: 16px; --st-space-5: 24px; --st-space-6: 32px; --st-space-7: 48px; --st-radius-sm: 6px; --st-radius-md: 10px; --st-radius-lg: 16px; --st-radius-pill: 999px; --st-line: 1px; --st-line-thick: 2px; /* * One shadow, and it does not move. `docs/RARE-CARDS.md`: static treatment * is always on and costs nothing; animation gates. A second, larger shadow * exists for the pull reveal, which is one card on screen rather than * twenty. */ --st-shadow-card: 0 1px 2px rgb(20 20 20 / 12%), 0 2px 8px rgb(20 20 20 / 8%); --st-shadow-hero: 0 6px 24px rgb(20 20 20 / 18%); --st-motion-fast: 120ms; --st-motion-med: 220ms; --st-motion-slow: 420ms; --st-ease: cubic-bezier(0.2, 0, 0.1, 1); --st-ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1); --st-z-base: 0; --st-z-sticky: 10; --st-z-sheet: 20; --st-z-modal: 30; --st-z-toast: 40; /* * `docs/DEVICES.md`: "Tap targets are 44px minimum, including sort headers * and filter chips. Hendora had 6 targets under 32px on one page." Mirrored * in `shared/card.ts` as MIN_TAP_TARGET_PX, and `npm run check:tokens` * asserts the two agree. */ --st-tap-min: 44px; /* The floor the collection views are checked at FIRST. Not 390. */ --st-viewport-floor: 360px; /* * ---- Content maxima (SB1, docs/DESKTOP.md). ---- * * STATED AND FEW, each attached to a KIND of content rather than a page — * before these, three pages had picked 480, 900 and 1920 with nothing * behind the choice. A page never types a width; it mounts in * `shell/shell.css`'s `.st-stage` and says which kind it is. * * copy a column someone reads or works down: prose, a form, one fight. * ~75ch at the body size, and the width half the site had already * converged on by hand. * play a screen of stock or choices: the shop, the market, the pantry. * Two comfortable panels side by side, and it still leaves ~100px * of margin on a 1366 screen, the narrowest desktop that matters. * table the card table. Derived, not chosen: the collection grid caps at * six 240px columns (`tokens/card.css`), and six cards, five gaps * and the gutters measure 1548 — this is that, rounded. (SB2 moved * the grid to auto-fit with a space-3 gap and space-5 gutters; the * derivation held.) */ --st-stage-copy: 720px; --st-stage-play: 1160px; --st-stage-table: 1560px; } /* * ---- The desktop type step (SB2, docs/DESKTOP.md). ---- * * SA6 measured the whole game at exactly two heading sizes — 28px and 22px — * IDENTICAL at 360 and at 1920 on all eighteen pages, which is half of what * made a desktop read as "a phone page stretched". So the three DISPLAY sizes * step up once, at 1366 (the narrowest desktop the stage maxima were chosen * against), and only they do: body, small and label sizes hold still, because * a 16px line in a 62ch column is right at any width and the 44px control * floor is measured against it. Headings are what tell a reader how far away * the screen is; paragraphs are not. * * A media query rather than clamp()-per-size, so the step lands on every * heading at once and the floor keeps the exact pixels every check was * measured at. */ @media (min-width: 1366px) { :root { --st-text-xl: 1.625rem; --st-text-2xl: 2.25rem; --st-text-3xl: 3rem; } } /* * THERE IS NO DARK SCHEME, DELIBERATELY. One lived here and was removed * 2026-09-04 -- see the note on `color-scheme` above. If one ever comes back * it has to answer the question that killed this one: what does a white-paper * drawing, cut out on transparency, sit on? * * Tier colours were the part worth keeping and they never changed by scheme * anyway: they are the game's vocabulary, and a rare that is one blue by day * and another by night is a rare nobody learns to recognise. */