/* ============================================================================= GLYPH — token delta over the Rogue AI Brand System ============================================================================= Glyph joins the system; it does not fork it. This file adds the 37 custom properties an app shell needs that a document system has no reason to publish. 11 introduce a number. 26 are aliases of tier-2 tokens. NO HEX APPEARS IN THIS FILE. Every colour resolves to a system token, so a palette change upstream reaches Glyph without a second edit here. LOAD ORDER — this file comes last: export/fonts.css (system) export/tokens.css (system) export/components.css (system) export/glyph-tokens.css (this file) The system's sheets are unlayered, so they sit in the implicit outer layer and win over any @layer. That is deliberate: Glyph must never out-specify the system by accident. Where Glyph needs to override a system component it does so with an explicit selector in glyph-components.css, not by weight. GROUND — Glyph names its ground on the html element: or Nothing below tests for polarity by any other means. ============================================================================= */ @layer glyph { /* --------------------------------------------------------------------------- SHELL GEOMETRY — 8 properties, 7 new numbers A document system has no chrome band, no row pitch and no resizable pane, so none of these can be inherited. --------------------------------------------------------------------------- */ :root { /* The only chrome that survives on a phone. Fixed so the view body can be sized against it rather than guessing. */ --glyph-header-h: 56px; /* Holds a two-line session row plus its badge cluster at --text-body without truncating the common case. */ --glyph-sidebar-w: 288px; /* Fits a 24px hover control with 6px of air while staying visibly subordinate to the header band. */ --glyph-tabstrip-h: 36px; /* A console scans on a fixed pitch. The system publishes padding, which is not the same thing: padding plus variable content gives a ragged rhythm. 28px leaves no room for a two-line row; 36px costs three rows a screen. */ --glyph-row-h: 32px; /* The same row on touch. The desktop pitch cannot meet target size, so the pitch changes at the breakpoint and the layout does not. */ --glyph-row-h-touch: 44px; /* Minimum box for an icon-only control, applied as padding on the hit area rather than as a visible size, so density survives the floor. */ --glyph-hit-min: 44px; /* Reading measure for streamed prose. The system's document measure is 7in — a paper figure, meaningless in a resizable pane. */ --glyph-measure-chat: 76ch; /* Alias, no new value: one decision for every view's outer padding instead of thirteen. */ --glyph-gutter-view: var(--rogue-space-6); } /* --------------------------------------------------------------------------- RUN STATE — 5 properties, 0 new numbers The system's status roles are document semantics: "warning" is a judgement about content. Glyph needs operational facts about a run. Same colours, honest names — a component should say what it means. --------------------------------------------------------------------------- */ :root { /* Nothing is running. Neutral on purpose: idle is not a status, it is the absence of one. */ --glyph-state-idle: var(--color-text-muted); /* A turn is in flight. Working, thinking and tool-running all bind here and separate by SHAPE — three blues would be three states nobody can name. */ --glyph-state-run: var(--color-accent-solid); /* Compaction. Input is blocked; the session is not in trouble. */ --glyph-state-hold: var(--color-warning-solid); /* Blocked on the user. Red because it is the one state where the estate stops until a human acts. */ --glyph-state-attention: var(--color-danger-solid); /* The turn completed. Today this state does not exist in Glyph at all, which is why it needed a name before it needed a shape. */ --glyph-state-done: var(--color-success-solid); } /* --------------------------------------------------------------------------- CADENCE — 3 properties, 3 new numbers The system's durations are transition-scale (0–280ms). A loop is a different thing from a transition. Glyph adds loop periods and touches nothing else. --------------------------------------------------------------------------- */ :root { /* The working loop. Long enough that a glance lands mid-cycle and reads "alive" rather than "blinking". */ --glyph-cadence: 1200ms; /* Degraded runs. The same shape at half speed reads as "still alive, nothing new" without inventing a second vocabulary. */ --glyph-cadence-slow: 2400ms; /* The reduced-motion binding. */ --glyph-cadence-still: 0ms; } /* --------------------------------------------------------------------------- FOCUS — 1 property, 1 new number The system's ring is correct and untouched. Its offset assumes a control with space around it; rows, tabs and list items are edge-to-edge, where a positive offset draws the ring on the neighbour. --------------------------------------------------------------------------- */ :root { --glyph-focus-offset-inset: -2px; } /* --------------------------------------------------------------------------- VENDOR — 2 properties, 0 new numbers The estate is two-vendor: Claude orchestrates and judges, Codex executes. Vendor is a categorical dimension, so it binds to the viz ramp the way any series does — and the two are NEVER averaged into one gauge or one hue. --------------------------------------------------------------------------- */ :root { --glyph-vendor-claude: var(--color-accent-solid); --glyph-vendor-codex: var(--viz-series-3); } /* --------------------------------------------------------------------------- TERMINAL — 20 properties, 0 new numbers xterm.js paints to a canvas and takes its colours as a JavaScript object, so this is a token-to-theme mapping rather than a stylesheet. Building the theme by READING these properties is what stops the terminal drifting from the system via a hand-edit in a .js file. DECLARED EXCEPTION — the terminal is the one component in Glyph that keeps its dark bindings on the light ground. On light, ANSI cyan measures 2.99:1 and blue 4.47:1 against --color-surface-sunken, and the palette holds no darker teal to reach for. Forking the palette and letting xterm's minimumContrastRatio silently mutate tool output are both worse. It is expressed structurally, not with hex: the terminal frame carries its own data-ground="dark", so every property below resolves to the dark value inside that subtree on either ground. minimumContrastRatio: 4.5 stays set as a backstop for colours the tools choose themselves. --------------------------------------------------------------------------- */ :root { --glyph-term-bg: var(--color-surface-sunken); --glyph-term-fg: var(--color-text-secondary); --glyph-term-cursor: var(--color-accent-solid); --glyph-term-selection: var(--color-accent-surface); --glyph-term-ansi-0: var(--color-page); /* black */ --glyph-term-ansi-1: var(--color-danger-solid); /* red */ --glyph-term-ansi-2: var(--color-success-solid); /* green */ --glyph-term-ansi-3: var(--color-warning-solid); /* yellow */ --glyph-term-ansi-4: var(--color-focus-ring); /* blue */ --glyph-term-ansi-5: var(--viz-series-5); /* magenta */ --glyph-term-ansi-6: var(--viz-series-3); /* cyan */ --glyph-term-ansi-7: var(--color-text-secondary); /* white */ --glyph-term-ansi-8: var(--color-text-muted); /* bright black */ --glyph-term-ansi-9: var(--color-danger-text); /* bright red */ --glyph-term-ansi-10: var(--color-success-text); /* bright green */ --glyph-term-ansi-11: var(--color-warning-text); /* bright yellow */ --glyph-term-ansi-12: var(--color-text-link); /* bright blue */ /* No second step exists for magenta or cyan. Resolving bright to base is honest; inventing a lighter tint would fork the palette. */ --glyph-term-ansi-13: var(--viz-series-5); /* bright magenta */ --glyph-term-ansi-14: var(--viz-series-3); /* bright cyan */ --glyph-term-ansi-15: var(--color-text); /* bright white */ } /* --------------------------------------------------------------------------- RESPONSIVE — every breakpoint rule in Glyph, in one place. Today these live in three separate @media blocks across app.css; the brief asks for them consolidated, so this is the whole set. --------------------------------------------------------------------------- */ @media (max-width: 768px) { :root { --glyph-header-h: 48px; --glyph-row-h: var(--glyph-row-h-touch); --glyph-gutter-view: var(--rogue-space-5); /* The sidebar becomes an overlay sheet at this width, not a column. Full-bleed minus a thumb-sized escape hatch back to the session. */ --glyph-sidebar-w: min(320px, 88vw); } } /* --------------------------------------------------------------------------- REDUCED MOTION — implemented, not declared. Every looping indicator in Glyph is a [data-glyph-cadence] element whose children animate. Holding the LIT state matters: an indicator frozen mid-cycle reads as stalled, which is a different message from "running". --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --glyph-cadence: var(--glyph-cadence-still); --glyph-cadence-slow: var(--glyph-cadence-still); } [data-glyph-cadence] > * { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Light vocabulary — one glow, four surfaces (login stage, Jarvis mark, live indicators, header chrome). Live states only; attention and done stay flat so urgency never competes with ambience. */ :root { --glyph-glow-blur: 10px; /* soft halo radius on a live indicator */ --glyph-glow-spread: 1px; /* keeps the halo inside a 32px row */ --glyph-glow-opacity: 0.34; /* multiplied into the state colour */ --glyph-glow-blur-dense: 5px; /* rows <= 32px: half blur, zero spread */ --glyph-glow-spread-dense: 0px; --glyph-glow-blur-stage: 48px; /* login stage + Jarvis centrepiece only */ } }