/* GENERATED from design/tokens.css — DO NOT EDIT. * Edit design/tokens.css, then: node scripts/design/build-tokens.mjs */ /* aswritten design tokens — SINGLE SOURCE OF TRUTH (task-346 phase 1). * * This file is the union of the five :root blocks that previously declared * tokens independently (ghost/theme/default.hbs inline, aswritten-brand.css, * landing.css, landing-scroll.css, resources/public/live/live.css). * * Surfaces consume via generated copies — run scripts/design/build-tokens.mjs * after editing this file (CI fails on drift): * resources/public/live/tokens.css (live surface, in index.html) * design/tokens.edn (CLJS / server-rendered surfaces) * Ghost surfaces migrate in later phases (task-346 AC#4, rides task-341) and * still declare their own copies until then. * * Layers: --sic-* color primitives + font stacks are the primitive layer; * the ink/gold alpha names and layout vars below are the pre-existing * semantic-ish layer carried over verbatim. The full semantic layer * (--surface/--ink/--accent, --status-*, --kind-*) lands with phase 2 * components — nothing new is minted here; phase 1 is extraction only. */ :root { /* ---- color primitives (sic scale) ---- */ --sic-red: #D64545; --sic-terr: #D06E4B; --sic-gold: #CDA349; --sic-blue: #4A7AFF; --sic-mint: #9CFFD0; /* minted by live.css; landing/ghost lacked it */ --sic-pink: #E54576; /* r4 mesh anchor (task-528, from the SIC identity package) */ --sic-chart: #DBE892; /* r4 mesh anchor (task-528, from the SIC identity package) */ --sic-paper: #F5F4F2; --sic-stone: #6E6E6B; --sic-ink: #1B1B1B; --room: #FFFFFF; /* page ground — the white room (task-528 r4); paper becomes the document surface on it */ /* ---- ink alphas ---- */ --border: rgba(27,27,27,0.12); --rule: rgba(27,27,27,0.18); --guide: rgba(27,27,27,0.08); --mark: rgba(27,27,27,0.22); /* CONFLICT resolved to landing-scroll's 0.22; brand.css declared 0.08 under the same name — see phase-1 discrepancy list. Ghost keeps its own copies until its migration phase, so nothing changes yet. */ --muted: rgba(27,27,27,0.6); /* ---- gold alphas ---- */ --gold-tint: rgba(205,163,73,0.05); --gold-target: rgba(205,163,73,0.13); /* ---- accent alphas (task-377 theater: merge-conflict wash, MCP chip) ---- */ --red-tint: rgba(214,69,69,0.06); --blue-tint: rgba(74,122,255,0.06); --blue-edge: rgba(74,122,255,0.4); /* ---- surfaces & ink derivatives (theme-bearing) ---- Promoted from component/live literals so both grounds resolve through one name (task-346 DS6). Alphas are witnessed from the ancestor styles (NUMEROLOGY exempts inherited values), re-based on light ink here and on light ink's dark complement (234,232,228) in the dark blocks below. */ --card: #fff; /* content-surface fill: card/toast/code-block/share-panel */ --ink-soft: #4a4a48; /* softened body ink: quotes, notes, lead paragraphs */ --ink-wash: rgba(27,27,27,0.05); /* faint ink fill: hover, selected, inline code */ --ink-faint: rgba(27,27,27,0.35); /* idle / not-yet text: rail placeholders */ --edge-strong: rgba(27,27,27,0.55); /* emphasized dashed action edge: btn */ --edge: rgba(27,27,27,0.45); /* standard dashed editable edge: field */ --edge-soft: rgba(27,27,27,0.35); /* quiet dashed edge: composer */ /* ---- type ---- */ /* default.hbs wraps --font1/--font2 in var(--gh-font-heading/body, …) so Ghost admin font overrides keep working — that wrapper stays at the Ghost surface (generated partial, phase 3), not here. */ --font1: 'Avenue X'; --font1-mono: 'Avenue Mono', ui-monospace, monospace; --font2: 'Source Serif 4', Georgia, serif; --font-ui: 'Source Sans 3', system-ui, -apple-system, sans-serif; --font-code: 'Source Code Pro', ui-monospace, monospace; /* ---- layout ---- */ --landing-gutter: 56px; --landing-max: 960px; --gutter: clamp(20px, 12vw, 240px); /* the sidebar that hangs beside the feed's --landing-max column — the theatre's rail (theatre.css .aw-th-railcol) and the position page's sidebar (position.css, Scarlet 2026-09-28: "should match the theatre sidebar"): its full width, the gap it keeps from the column once the margin is wide enough to hug, and its inset from the window's edge when the margin is tight. Below 1424px the margin cannot hold it (both pages fold it at the same breakpoint). */ --rail-w: 264px; --rail-gap: 28px; --rail-edge: 16px; /* ---- motion (numerology rule) ---- Minted values encode Jodorowsky's tarot numerology — the full arcana vocabulary, not just one pair; see design/NUMEROLOGY.md. XVIII The Moon (the unresolved) times in-flight states; XIX The Sun (resolution, Scarlet's life number) times confirmations. Further motion tokens mint here as components consume them (Judgement 2.0s notifications, XIII 1.3s supersession…). */ --motion-sun: 190ms; --motion-moon: 1.8s; /* ---- r5 stroke devices (task-545, from the task-535 ratified comp) ---- The bracket identity's drawn-stroke geometry: V3 long dashes (never CSS border-dots — they read as boxes), arm depths for the drawn [ ] pair and its absorbed [[ ]] inner pair, and the viewfinder corner marks. 543/544 device components (.call, enclosures, the collapsed position rows, viewfinder) consume these names, not raw values. Color jobs stay on the existing tokens (--sic-gold, --gold-tint, --red-tint, --mark). */ /* the dimmed room behind an overlay (drawer, MCP sheet — r5.2 ruling 22; the r5.4 walkthrough dims at the same register). One name, both grounds. */ --scrim: rgba(27,27,27,0.38); --brk-stroke: 2.5px; /* drawn-stroke weight */ --brk-dash: 8px; /* dash length (long — the ruled treatment) */ --brk-dash-gap: 6px; /* gap in the dash rhythm (8px on / 6px off) */ --brk-arm: 12px; /* horizontal arm depth of the drawn bracket */ --brk-arm-inner: 9px; /* arm depth of the nested/absorbed inner pair */ --vf-arm: 10px; /* viewfinder corner-mark arm */ /* ---- the grouped feed's calls: comp B (Scarlet, 2026-09-28, "let's try mock b for separation … yea please on gutter date"). Each call sits under a heavy rule (--brk-stroke in ink), with more space above it than between its rows, and its date in a left gutter beside the header. */ --feed-gutter: 112px; /* the date's gutter; the rows align past it */ --feed-gutter-gap: 16px; /* the date's clearance from the header text */ --feed-row-gap: 12px; /* between the rows (and the column's rhythm) */ --feed-call-space: 12px; /* added above each call, over --feed-row-gap */ --feed-date-top: 14px; /* the rule to the header's first line */ --feed-date-size: 12.5px; /* the gutter date (comp B's size) */ --feed-date-leading: 1.5; /* its line height: the day, the time under it */ /* ---- the position page as comp C (Scarlet, 2026-09-28): tabs over three labelled sections, the sidebar in the shell's left column ---- */ --pp-section-space: 22px; /* above a section's heavy rule */ --pp-section-pad: 14px; /* the rule to the section's label */ --pp-tab-gap: 32px; /* between the tabs */ --pp-tab-pad: 12px; /* a tab's vertical padding */ --pp-sign-gutter: 20px; /* the + / − gutter before a line or a statement */ /* the change as one bounded block, the review in two places (Scarlet, 2026-09-28 dev walk) */ --pp-change-pad-y: 14px; /* the block's bracket to its content, top and bottom */ --pp-change-pad-x: 22px; /* … and at its sides (the bracket's arms) */ --pp-bar-btn-size: 12px; /* the compact review buttons beside next unread */ --pp-bar-btn-pad-y: 2px; --pp-bar-btn-pad-x: 10px; /* ---- "ask your AI" (task-701, 2026-09-28): the panel, a paper popover under the header's right edge ---- */ --ai-panel-top: 69px; /* the header's 61px, then 8 of air */ --ai-panel-width: 468px; /* the panel's paper width on desktop */ /* ---- the theatre's one-line runs (task-701.41: the July r5 rulings 17/18, restored by Scarlet 2026-09-29). Passages that changed nothing read as one line each in a centred column set in from the replies; a click opens one in place. ---- */ --th-run-width: 60%; /* the run's column, centred in the flow (3/5) */ --th-run-space: 18px; /* above and below a run */ --th-run-inset: 24px; /* its side margins on the phone: one step, symmetric */ --th-line-mono: 12px; /* a line's brackets and name, in mono */ --th-line-words: 13px; /* its first words, in serif */ --th-line-open-space: 8px; /* above and below a line opened in place */ /* the call page (task-701.42): the selected position's statements run full width; the viewer's own hug the right edge up to this */ --th-stmt-mine-max: 760px; } /* ---- theming (task-346 DS6) ---------------------------------------------- Light (above) is the default and the landing's only ground ("paper is the brand's stage" — landing stays light-only by intent). Dark redefines ONLY the color-bearing tokens; components style through tokens, never inside a media query. The warm dark ground (#1d1c1a) and its ink (#EAE8E4) carry over from the prior dark-artifact palette; ink alphas re-base on the ink's own channel (234,232,228) so borders/rules read on the dark ground. Three cascades, explicit wins in both directions: @media (prefers-color-scheme: dark) → follow the OS :root[data-theme="dark"] → explicit dark (styleguide toggle) :root[data-theme="light"] → explicit light (beats an OS dark) */ @media (prefers-color-scheme: dark) { :root { --sic-paper: #1d1c1a; --sic-ink: #EAE8E4; --sic-stone: #9a9894; --room: #161514; --border: rgba(234,232,228,0.12); --rule: rgba(234,232,228,0.18); --guide: rgba(234,232,228,0.08); --mark: rgba(234,232,228,0.22); --muted: rgba(234,232,228,0.6); --gold-tint: rgba(205,163,73,0.08); --red-tint: rgba(214,69,69,0.09); --blue-tint: rgba(74,122,255,0.09); --card: #262522; --ink-soft: #c4c2be; --ink-wash: rgba(234,232,228,0.07); --ink-faint: rgba(234,232,228,0.35); --edge-strong: rgba(234,232,228,0.5); --edge: rgba(234,232,228,0.4); --edge-soft: rgba(234,232,228,0.32); --scrim: rgba(0,0,0,0.5); } } :root[data-theme="dark"] { --sic-paper: #1d1c1a; --sic-ink: #EAE8E4; --sic-stone: #9a9894; --room: #161514; --border: rgba(234,232,228,0.12); --rule: rgba(234,232,228,0.18); --guide: rgba(234,232,228,0.08); --mark: rgba(234,232,228,0.22); --muted: rgba(234,232,228,0.6); --gold-tint: rgba(205,163,73,0.08); --red-tint: rgba(214,69,69,0.09); --blue-tint: rgba(74,122,255,0.09); --card: #262522; --ink-soft: #c4c2be; --ink-wash: rgba(234,232,228,0.07); --ink-faint: rgba(234,232,228,0.35); --edge-strong: rgba(234,232,228,0.5); --edge: rgba(234,232,228,0.4); --edge-soft: rgba(234,232,228,0.32); --scrim: rgba(0,0,0,0.5); } :root[data-theme="light"] { --sic-paper: #F5F4F2; --sic-ink: #1B1B1B; --sic-stone: #6E6E6B; --room: #FFFFFF; --border: rgba(27,27,27,0.12); --rule: rgba(27,27,27,0.18); --guide: rgba(27,27,27,0.08); --mark: rgba(27,27,27,0.22); --muted: rgba(27,27,27,0.6); --gold-tint: rgba(205,163,73,0.05); --red-tint: rgba(214,69,69,0.06); --blue-tint: rgba(74,122,255,0.06); --card: #fff; --ink-soft: #4a4a48; --ink-wash: rgba(27,27,27,0.05); --ink-faint: rgba(27,27,27,0.35); --edge-strong: rgba(27,27,27,0.55); --edge: rgba(27,27,27,0.45); --edge-soft: rgba(27,27,27,0.35); --scrim: rgba(27,27,27,0.38); } /* Keep --landing-gutter in sync with the responsive .lp padding so the carousel/track formulas resolve to the right value per breakpoint. */ @media (max-width: 1080px) { :root { --landing-gutter: 32px; } } @media (max-width: 767px) { :root { --landing-gutter: 20px; } }