/* ============================================================================ tokens.css — SWAP SURFACE 1. OWNED BY THE DESIGN TEAM. Every colour, size, radius, spacing step and timing in the handbook resolves through a token in this file. Nothing else in css/ or js/ contains a literal value. Replacing this file recolours and retypes the entire site. STATUS: placeholder values, milestone M0. Superseded by design round 1. Spec: docs/Ritma Symposium 2026 - Design Requirements.pdf ========================================================================= */ :root { /* --- Zone 1 · handbook --------------------------------------------------- Cool and restrained. Exactly one warm object on the screen (Planet Test). */ --space: #0A1428; /* page ground, everywhere */ --ambient: #060D1A; /* behind the frame on desktop review */ --bar-scrim: rgba(10, 20, 40, .72); /* sticky app bar over any zone */ --panel: #101E38; /* card and row surfaces */ --panel-glass: rgba(18, 33, 60, .62); /* over the starfield */ --sunken: #07101F; --line: #223A5E; /* borders, dividers 1.9:1 */ --line-strong: #2A4A73; --text: #E9F0F9; /* primary 16.4:1 */ --text-mid: #93A9C6; /* secondary, captions 7.6:1 */ --text-low: #6B82A2; /* times, faint labels 4.7:1 */ /* ^ FLOOR. Darkening this fails AA. */ --accent: #4BBAEA; /* the single accent, designer round 2. 8.3:1 on --space */ --accent-light: #A8DFF9; /* gradient top; pair with --accent */ /* The star tile's own ground. A page longer than the artwork continues into that tile rather than into flat colour, so this is now only what sits under everything if an image fails — keep it matching the tile. */ --bg-tail: #090A10; --accent-soft: rgba(75, 186, 234, .11); --accent-line: rgba(75, 186, 234, .40); /* --- Zone 1 · navigation planets ---------------------------------------- The home planets are delivered renders now (assets/planets/), so the sphere highlight/shadow triples that drew them in CSS are gone. Only the four room hues survive, because room and topic pages still set --room from each room file's colorToken. Since round 8 nothing on screen resolves to them. The agenda paints from the room palettes below, and on a room page every rule that reads --room is overridden by that room's own palette. They can go when colorToken leaves the room files, which is a content change of its own. */ --room-br1: #5A8CC4; /* azure */ --room-br2: #3F8A98; /* seafoam */ --room-br3: #6E7BB8; /* periwinkle */ --room-br4: #4E6B85; /* slate */ /* --- Zone 1 · breakout rooms, design rounds 3 and 4 ---------------------- BR1 delivered 7 September, BR2-BR4 on the 8th. These are room colours, not site accents: the control bar, home constellation and everything else stay on the round 2 cyan. Round 8's overall agenda is drawn in these same colours, to the byte, so its room blocks wear these palettes too — see the end of app.css. Each room is a stroke gradient plus a solid. The gradient pair is what the border runs top to bottom; the solid is headings, times and live text, and is also what the panel interior is washed with at 15%. Measured from the artwork, not chosen: tools/separate-frames.py reports the wash per frame. The gradients are the arcs that tell each room's ink apart during separation, so changing one here means re-running that tool. */ --br1-ink-light: #F8E2B0; --br1-ink: #E3BB76; --br1-solid: #EECB8B; --br1-wash: rgba(238, 203, 139, .149); --br2-ink-light: #0FBED8; --br2-ink: #36669C; --br2-solid: #0FBED8; --br2-wash: rgba(15, 190, 216, .149); --br3-ink-light: #FAA48B; --br3-ink: #CB1A08; --br3-solid: #FAA48B; --br3-wash: rgba(250, 164, 139, .149); /* BR3's own colour runs to red, and red on a person's name is pantang in Chinese custom. Speaker names in this room take this instead. */ --br3-name: #FFE6D8; --br4-ink-light: #F8CCA5; --br4-ink: #FC9E44; --br4-solid: #F8CCA5; --br4-wash: rgba(248, 204, 165, .149); /* Shared by all four rooms — the artwork uses the same neutrals throughout. */ /* What the artwork paints inside a row: charcoal at 55%, so the starfield reads through it as it does everywhere else. */ --fr-row-wash: rgba(61, 61, 61, .549); /* The session running now, and any row under a finger. Lifted off the row rather than tinted: a warm cast on one row in six reads as a colour fault, a lighter one reads as attention. */ --fr-row-live: #47474D; --fr-row-press: #45454A; --fr-glow: rgba(255, 255, 255, .25); /* The near-white segments that interrupt a row's border. Not a tint of the room colour — the artwork uses the same neutral in every room. */ --fr-edge: #E5E5E9; /* --- Zone 1 · chrome frames, design round 5 ------------------------------ The event map and other information pages, delivered 8 September. These are NOT a room. The ink is the round 2 accent: the modal fully-opaque pixel of the map frame and the tab button is #4BBAEA or #A8DFF9, which is --accent and --accent-light to the byte. Nothing new to add for it. Only the interior wash is new, and it is not a tint of the accent — it is a brighter cyan, measured off the artwork at the same 15% the rooms use. The map's room rows are the exception to all of that. The artwork paints them on the same charcoal at 55% as a session row, with the same near-white edge segments, so they take --fr-row-wash and --fr-edge unchanged and appear nowhere below. The two info panels are drawn with #8AD3F4 as their light end rather than #A8DFF9, which appears nowhere in them. They are otherwise the same drawing as the rest of the drop, so the token that already exists wins and all four frames are painted from the one pair. Raised with the designer; see design/round-5/README.md. It was --chrome-wash until round 6, whose start button is washed with the same value to the byte. Two scopes share it now, so the name no longer says chrome. */ --frame-wash: rgba(51, 231, 255, .149); /* --- Zone 2 · the Planet Test, design round 6 ---------------------------- Delivered 8 September. Zone 2 used to be a warm tonal break — a plum ground, an amber select, the character's colour flooding the result page. The artwork is not warm, so none of that survived: the quiz wears the round 2 accent on the same starfield as every other page, and its frames are painted from --accent, --accent-light, --frame-wash and --fr-edge, all of which were already here. See decisions.md. What is left is the two things on those screens that genuinely are warm. The character colours are now only the plushie's own, used for the sphere that stands in for the photograph until it loads, and for nothing else. Vega's render is a deeper blue than this token — #1050A0 against #4E9BE8 — which matters only for that half-second. */ --char-nova: #F26A21; --char-vega: #4E9BE8; --char-terra: #4FC3B0; /* The result tagline: THE TRAILBLAZER under the name. Measured off the artwork, and it is nobody's character colour. The drop only draws Nova, so whether it is fixed or follows the character is open with the designer — see design/round-6/README.md. 8.7:1 on --space. */ --quiz-tagline: #DDB18E; /* --- Semantic state ------------------------------------------------------ */ --state-ok: #4FC3B0; --state-pending: #6B82A2; --state-alert: #F58A3C; /* --- Type ---------------------------------------------------------------- Two families. Designers to nominate real faces plus a Simplified Chinese face in round 1; the CJK subset is built after copy freeze (M7). */ /* Display face: AGRESSIVE, delivered round 2, subset to Latin (18 KB). No CJK glyphs — Chinese titles fall through to the CJK stack, the same behaviour as the logo. Licensed for personal use only as delivered (assets/fonts/LICENSE.txt); raised with the client and accepted as-is. See decisions.md — this is settled, not an open action. Body face: the designer nominated Proxima Nova (Adobe Fonts), whose licence does not allow self-hosting. Body text sat on the system stack until round 2, when it became clear that stack has no font in common with Android at all — the same page came out in a different face on every make of handset. It now ships Inter and Roboto Mono, both SIL Open Font License, both self-hosted, both variable so one file covers every weight. Still no third-party runtime dependency. */ --font-display: "Agressive", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; /* Both shipped with the site, so a page reads the same on every handset. The stacks behind them are only for the moment before the file lands. */ --font-mono: "Roboto Mono Web", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; /* The three round 6 display sizes are measured off that drop rather than chosen: set against the artwork at the width it is drawn for, PLANET TEST comes out 220px wide and renders at 217, and NOVA 144 against 143. The body sizes below are NOT the drop's. Scaled the same way, its answer rows read at about 11px on a 375px phone and its question at 18px, which is a mockup canvas rather than a device — the same class of thing round 5 found with the chrome tabs. What M2 settled is kept, the frames stretch to it, and it is raised in design/round-6/README.md. */ --size-hero: 37px; /* PLANET TEST, the quiz intro */ --size-display: 37px; /* result character name */ --size-action: 27px; /* START */ --size-question: 20px; /* quiz question */ --size-title: 18px; /* page title */ --size-option: 14.5px; /* quiz answer */ --size-body: 14px; --size-row: 13px; /* session row title */ --size-small: 12.5px; --size-caption: 11px; --size-label: 10px; --track-label: .13em; --track-eyebrow: .17em; --leading-tight: 1.28; --leading-body: 1.55; --leading-cjk: 1.72; /* Chinese needs more air */ /* --- Radius --------------------------------------------------------------- */ --r-chip: 4px; --r-control: 9px; --r-card: 11px; --r-pill: 999px; /* --- Spacing -------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --edge: 18px; /* screen edge padding */ /* Home only. Its background is a frame, and the rails start 6.51% in — a distance that grows with the screen, so a fixed inset clears them at one width and runs under them at another. Overridden in app.css. */ --edge-framed: 7.2%; --tap-min: 44px; /* WCAG minimum touch target */ /* The control bar, and the frame slice that closes on the artwork's bright hairline. One value, so the line always lands on the bar's bottom edge with the controls clear of it rather than sitting on it. */ --bar-h: 56px; /* --- Elevation · three steps only ----------------------------------------- */ --lift-flat: none; --lift-raised: 0 -10px 30px rgba(0, 0, 0, .5); --lift-glow: 0 0 26px; /* colour supplied per element */ /* --- Motion -------------------------------------------------------------- Almost none, and only in one place: the home constellation's reveal. Page transitions were built and removed for making navigation feel slow, and that still stands — see decisions.md. What is below animates on the page rather than across a navigation, plays once per session, and is skipped outright under prefers-reduced-motion. Press states everywhere else still change instantly. Anything added here gets measured on a mid-range phone, not a laptop. */ --orbit-out: 520ms; /* planets travelling out */ --orbit-in: 380ms; /* and back — quicker, nothing waits on it */ --orbit-stagger: 45ms; /* between one planet and the next */ --orbit-stagger-in: 30ms; --orbit-ease: cubic-bezier(.22, .9, .28, 1); /* --- Layout --------------------------------------------------------------- */ --w-min: 320px; --w-base: 375px; --w-max: 430px; }