/* Tokens: the primitive ramp, the shared scale, and the two semantic theme packs. First paint, imported by styles.css. */ /* Archon design tokens + chrome - see DESIGN.md One design language; light/dark = semantic renderings. Components bind to semantic tokens only - never theme hex. */ /* Geist (SIL OFL, Vercel) vendored by scripts/gen-fonts.mjs - see fonts/LICENSE.txt. One variable file per family carries every weight the chrome asks for. */ @font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* - - Primitive: zinc - neutral with a faint cool cast - - Each step keeps the lightness the old pure greys had, so every contrast pair holds; the cast (a whisper of blue-violet, chroma under 0.01) is what makes paper read as paper and ink as ink instead of as grey. */ --neutral-0: #ffffff; --neutral-50: #f9f9fa; --neutral-100: #f3f3f5; --neutral-150: #e9e9ec; --neutral-200: #dcdce1; --neutral-300: #bbbbc3; --neutral-350: #a2a2ab; --neutral-400: #8b8b95; --neutral-500: #6b6b75; /* The quiet ink in light: one step past 500, so it holds 4.5:1 on a pressed row. */ --neutral-550: #5e5e68; --neutral-600: #51515a; --neutral-700: #393940; /* A control's rest and a row pointed at in dark: under 700, so press can lift. */ --neutral-750: #303036; --neutral-800: #26262b; --neutral-850: #1c1c20; --neutral-900: #131316; --neutral-950: #09090b; --color-scrim-dark: rgba(4, 4, 8, 0.6); --color-scrim-light: rgba(16, 16, 24, 0.32); /* - - Shared (theme-invariant) - - */ --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --radius-outer: 18px; /* The two shell panels, sidebar and stage: one generous curve, floating on the canvas. */ --radius-shell: 22px; --radius-inner: 10px; --radius-pill: 999px; /* A row in a list or a menu: rounder than a control, squarer than a pill. */ --radius-row: 10px; /* A control that is off looks off, at one strength everywhere. Four values for one fact (0.5 / 0.55 / 0.65 / 0.72) had drifted across five hand-written rules, and the commonest button family had none at all. */ --opacity-disabled: 0.5; --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --font-ui: var(--font-sans); /* Instrument chrome speaks the same sans as prose; mono is reserved for machine text (paths, diffs, code, terminal, refs, keycaps). */ --font-display: var(--font-sans); /* The scale: 12 · 14 · 15 · 16 · 18, and one display size. Chrome never goes under 12px - a smaller label is a whisper nobody reads - and the base is 14px, where a dense list is still read without leaning in. */ --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; /* The one display size: a greeting, a welcome, the public page's head. */ --text-display: 38px; /* A field a finger types in stays at 16px, or iOS zooms the page to it. */ --text-touch-field: 16px; /* Reading size: what an agent writes and what a person sends. Chrome is 14px; prose is read, not scanned, so it gets 15px on a 1.6 line (the size and leading Linear, Claude and ChatGPT settle long text on). */ --text-prose: 15px; --leading-prose: 1.6; --leading-tight: 1.3; --leading-snug: 1.4; --leading-normal: 1.5; /* Titles tighten as they grow; small text keeps the face's own spacing. */ --tracking-tight: -0.015em; --tracking-display: -0.03em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --motion-duration-fast: 120ms; --motion-duration-normal: 180ms; --motion-duration-panel: 260ms; /* Semantic loops - not the same as UI transition durations */ --motion-duration-working: 1.2s; --motion-duration-attention: 1.8s; --motion-easing: cubic-bezier(0.2, 0, 0, 1); /* A highlight arrives with the pointer (0ms) and fades as it leaves, so a sweep down a list reads as one light moving, never a row lagging behind. */ --motion-hover-out: 150ms; /* A pressed control gives a little under the finger. */ --press-scale: 0.97; /* Something arriving: a quick settle with a trace of overshoot. */ --motion-easing-emphasized: cubic-bezier(0.3, 1.25, 0.5, 1); /* In-flow lift above siblings; 2-3 stay raw where a component orders its own local stack. Overlay chrome starts at --z-overlay; named neighbours own the offsets around it (no calc(var(--z-overlay) ± n) hatches): --z-overlay-scrim sits just under overlay chrome (drawer scrim), --z-overlay-raised beats sibling overlay-tier panels (skip link, model list), and --z-overlay-top is the one popover that must clear a raised panel too (model status over the open model list). */ --z-raised: 1; /* A ring reserved for structural data edges; never card decoration. */ --ring-subtle: inset 0 0 0 1px var(--border-subtle); --z-overlay-scrim: 39; --z-overlay: 40; --z-overlay-raised: 41; --z-overlay-top: 42; --z-banner: 50; --z-dialog: 60; /* Popover geometry — shared elevated no-scrim panels (.popover). */ --popover-width-s: 16rem; --popover-width-m: 21rem; --popover-width-l: 22rem; /* One seam between a composer-anchored popover and the composer stack. */ --popover-anchor-gap: 0.35rem; --drawer-width: 256px; /* The workspace strip at the shell's left edge: one tile per workspace. */ --ws-strip-width: 56px; --ws-tile-size: 38px; /* One row pitch for a tile in the strip and a row in the opened strip, so opening it only adds the names beside tiles that do not move. */ --ws-row: 46px; --ws-label: 26px; --ws-menu-width: 280px; /* A workspace tile's letters and the light that makes it a thing you press: white on every --ws-tile-* gradient, in both themes. */ --ws-tile-ink: #ffffff; --ws-tile-bevel: none; /* Drawer rhythm — single owners (see DESIGN.md Drawer rhythm). */ --drawer-pad-x: var(--space-3); --drawer-pad-top: var(--space-2); --drawer-brand-gap: var(--space-4); --drawer-section-gap: var(--space-5); --drawer-nav-gap: calc(var(--space-3) * 0.8); --drawer-world-gap: calc(var(--space-3) * 0.9); --drawer-head-gap: var(--space-1); /* The rail's one leading column: every row's glyph — the 36px `.avatar--md` tile, the Library icon, the Add mark — occupies this width, so every label in the drawer starts on the same text column. */ --drawer-lead: 24px; --drawer-head-action: 2rem; --header-height: 60px; --dock-rail-width: 2.75rem; --dock-splitter-size: 6px; --btn-height: 2rem; --settings-control-height: 2.5rem; --composer-radius: var(--radius-outer); --composer-inset: 8px; /* Concentric: an inset control's curve is the shell's curve minus the seam it sits behind, so the tile and the shell share one centre of curvature. */ --composer-control-radius: calc(var(--composer-radius) - var(--composer-inset)); --composer-control-size: 44px; /* Input + instrument rail are one band: breathing outside, hairline seam between. */ --composer-band-pad: var(--space-3); --composer-seam: var(--space-1); /* One height and one type size for every instrument on the rail, so the left cluster (project / branch / diff) sits on the same line as the right cluster (Mode · Approvals). */ --rail-control-height: 36px; /* Modal rhythm — single owners (see DESIGN.md Modal rhythm). */ --modal-pad-x: var(--space-6); --modal-pad-y: var(--space-6); --modal-head-gap: var(--space-5); --touch-target: 44px; /* Reply surface readable band (68-76ch). Turns/tools use full chat column. */ --content-max: 72ch; /* Transcript rhythm — parent gap owns separation (see DESIGN.md Transcript rhythm). */ --chat-block-gap: var(--space-4); --chat-stack-gap: var(--space-2); --chat-tool-gap: var(--space-1); /* Reading room under the newest message, inside the scroller: the last reply rests clear of the composer seam instead of ending against it. */ --chat-tail-pad: var(--space-8); --stage-inset: 10px; --inline-gutter: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right)); /* Chat measure: transcript and composer bands stretch with the pane, their content stays centered inside one column (see DESIGN.md Chat measure). */ --chat-measure: 880px; --chat-gutter: max(var(--inline-gutter), calc((100% - var(--chat-measure)) / 2)); } /* - - Tint: the colour a person picks in Appearance - - */ /* One hue runs the sky the glass floats on, Home's light and Archon's orb (theme.js keeps the orb on it). Grey keeps the light and drops the colour. */ :root { --tint-h: 262; --tint-c: 1; --tint-swatch: oklch(0.68 calc(0.14 * var(--tint-c)) var(--tint-h)); } html[data-tint="purple"], .tint-swatch[data-tint="purple"] { --tint-h: 296; } html[data-tint="pink"], .tint-swatch[data-tint="pink"] { --tint-h: 350; } html[data-tint="orange"], .tint-swatch[data-tint="orange"] { --tint-h: 55; } html[data-tint="green"], .tint-swatch[data-tint="green"] { --tint-h: 155; } html[data-tint="teal"], .tint-swatch[data-tint="teal"] { --tint-h: 205; } html[data-tint="grey"], .tint-swatch[data-tint="grey"] { --tint-h: 262; --tint-c: 0; } /* Each swatch in Appearance shows its own colour, whatever the page wears. */ .tint-swatch { --tint-h: 262; --tint-c: 1; --tint-swatch: oklch(0.68 calc(0.14 * var(--tint-c)) var(--tint-h)); } /* - - Semantic: Archon light - - */ html[data-theme="archon-light"], :root { /* The canvas the two glass panels float on: a pale sky with light blooming through it, so the glass has something to catch. */ --surface-chrome: #e3e9f4; --canvas-wash: radial-gradient(45% 40% at 4% 0%, oklch(0.995 calc(0.004 * var(--tint-c)) var(--tint-h)) 0%, transparent 70%), radial-gradient(48% 42% at 92% 2%, oklch(0.87 calc(0.05 * var(--tint-c)) var(--tint-h)) 0%, transparent 72%), radial-gradient(55% 48% at 22% 100%, oklch(0.88 calc(0.05 * var(--tint-c)) calc(var(--tint-h) + 34)) 0%, transparent 70%), radial-gradient(50% 45% at 100% 92%, oklch(0.89 calc(0.038 * var(--tint-c)) calc(var(--tint-h) - 8)) 0%, transparent 70%), radial-gradient(40% 30% at 55% 45%, oklch(0.96 calc(0.012 * var(--tint-c)) var(--tint-h)) 0%, transparent 70%), linear-gradient(180deg, oklch(0.95 calc(0.016 * var(--tint-c)) var(--tint-h)) 0%, oklch(0.92 calc(0.022 * var(--tint-c)) calc(var(--tint-h) + 4)) 100%); /* The workspace strip sits on the canvas itself. */ --surface-strip: transparent; /* Glass: the two panels are translucent white over the blurred sky, their edges catching the light. */ --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.42) 100%); --surface-stage-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.6) 100%); --glass-blur: blur(28px) saturate(1.5); --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.95); /* The row you are on in the sidebar: a bright pill of glass. */ --surface-nav-selected: rgba(255, 255, 255, 0.82); --shadow-nav-selected: 0 1px 2px rgba(29, 42, 74, 0.06), 0 4px 14px -6px rgba(29, 42, 74, 0.12); /* A field on glass: a lighter pane, never a grey well. */ --surface-glass-field: rgba(255, 255, 255, 0.6); /* Home's room light, around the orb. */ --home-light: rgba(255, 255, 255, 0.95); /* What every orb's glass sits on. */ --orb-backing: rgba(255, 255, 255, 0.5); --home-light-wide: oklch(0.9 calc(0.045 * var(--tint-c)) var(--tint-h) / 0.5); --surface-stage: var(--neutral-0); --surface-stage-elevated: var(--neutral-50); --surface-elevated: var(--neutral-0); --surface-overlay: var(--neutral-0); --surface-hover: var(--neutral-150); --surface-active: var(--neutral-200); /* Selected content lifts off chrome instead of sinking into it. */ --surface-selected: var(--surface-elevated); --shadow-selected: 0 1px 2px color-mix(in oklab, var(--neutral-900) 10%, transparent); /* Deliberate alias of --surface-elevated: "raised" names static elevation, "selected" names the chosen row - same pour today, distinct meanings. */ --surface-raised: var(--surface-elevated); --surface-deep: var(--neutral-100); /* The composer band is the stage itself; the composer is the sheet on it. */ --surface-composer: transparent; --surface-input: var(--neutral-100); --surface-btn: var(--neutral-150); --surface-callout: var(--neutral-100); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-emphasis: var(--neutral-500); --border-strong: var(--neutral-700); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-550); --text-inverse: var(--neutral-0); --brand-primary: var(--neutral-900); --brand-primary-dim: color-mix(in oklab, var(--text-primary) 8%, transparent); --brand-primary-hover: var(--neutral-950); --status-success: var(--neutral-600); --status-error: var(--neutral-900); --status-success-wash: var(--neutral-100); --status-error-wash: var(--neutral-150); --status-warning-wash: var(--neutral-100); /* Functional hue is derived in OKLCH: one lightness per family, chroma held near the sRGB edge, so no accent reads muddier than its neighbour. Live agent state first - it must carry across the room. */ --status-working: #006f25; --status-attention: #a04500; --mode-build: #0069c5; --mode-plan: #a67700; --model-problem: #c2181d; /* Chat tool-action accents (glyph ink + whisper card/thinking washes). */ --tool-think: #af5500; --tool-read: #0074ca; --tool-search: #008a39; --tool-edit: #8156c0; --tool-run: #956800; --tool-web: #00818d; --tool-error: #c2181d; /* Conversation voices use contrast and alignment, with neutral surfaces. */ --chat-you: #116bb5; --chat-you-wash: color-mix(in oklab, var(--chat-you) 14%, var(--surface-hover)); /* Speech has two surfaces: your ink bubble and the agent's soft neutral bubble. */ --chat-you-surface: var(--neutral-150); --chat-you-ink: var(--text-primary); --chat-agent-wash: var(--neutral-100); /* Shared chat/rooms bubble geometry — one source of truth for the dyad and group message surfaces. Colours stay per-voice; alignment stays per-layout. */ --bubble-pad: var(--space-3) var(--space-4); --bubble-radius: var(--radius-outer) var(--radius-outer) var(--radius-outer) var(--radius-inner); --bubble-radius-you: var(--radius-outer) var(--radius-outer) var(--radius-inner) var(--radius-outer); --bubble-ring: var(--ring-subtle); /* The think ink carries roughly twice the chroma it used to, so a lighter pour reads as more colour while quiet thinking text keeps its 4.5:1. */ --tool-think-wash: color-mix(in oklab, var(--tool-think) 4%, var(--surface-input)); --tool-read-wash: color-mix(in oklab, var(--tool-read) 8%, var(--surface-stage-elevated)); --tool-search-wash: color-mix(in oklab, var(--tool-search) 8%, var(--surface-stage-elevated)); --tool-edit-wash: color-mix(in oklab, var(--tool-edit) 8%, var(--surface-stage-elevated)); --tool-run-wash: color-mix(in oklab, var(--tool-run) 8%, var(--surface-stage-elevated)); --tool-web-wash: color-mix(in oklab, var(--tool-web) 8%, var(--surface-stage-elevated)); --tool-error-wash: color-mix(in oklab, var(--tool-error) 10%, var(--surface-stage-elevated)); /* Agent identity: eight frozen slots. Fill is the saturated ink; --agent-on-* is glyph/initials ink that clears 4.5:1. Slot 0 is the achromatic disc for an agent we cannot name. */ --agent-ink-0: var(--text-secondary); --agent-color-0: var(--surface-elevated); --agent-on-0: var(--text-secondary); /* Mineral hues: distinct identities, balanced saturation, white glyph contrast. */ --agent-ink-1: #315fce; --agent-ink-2: #7456bc; --agent-ink-3: #a04786; --agent-ink-4: #c34e6a; --agent-ink-5: #a96428; --agent-ink-6: #247a63; --agent-ink-7: #237d85; --agent-ink-8: #47709b; --agent-color-1: var(--agent-ink-1); --agent-color-2: var(--agent-ink-2); --agent-color-3: var(--agent-ink-3); --agent-color-4: var(--agent-ink-4); --agent-color-5: var(--agent-ink-5); --agent-color-6: var(--agent-ink-6); --agent-color-7: var(--agent-ink-7); --agent-color-8: var(--agent-ink-8); --agent-on-1: var(--neutral-0); --agent-on-2: var(--neutral-0); --agent-on-3: var(--neutral-0); --agent-on-4: var(--neutral-0); --agent-on-5: var(--neutral-0); --agent-on-6: var(--neutral-0); --agent-on-7: var(--neutral-0); --agent-on-8: var(--neutral-0); /* Functional code-review color: confined to diff lines and diffstat. */ /* Office mode (light): interiors + lighting (sprites carry their own palette). */ --diff-addition-line: #e6ffec; --diff-addition-gutter: #ccffd8; --diff-addition-word: #abf2bc; --diff-addition-text: #137333; --diff-deletion-line: #ffebe9; --diff-deletion-gutter: #ffd7d5; --diff-deletion-word: #ffb3b3; --diff-deletion-text: #b42318; /* Tonal surfaces and soft elevation separate floating panels. */ --shadow-modal: 0 4px 12px -2px color-mix(in oklab, var(--neutral-900) 8%, transparent), 0 18px 44px -10px color-mix(in oklab, var(--neutral-900) 20%, transparent); --shadow-stage: 0 1px 2px color-mix(in oklab, #1d2a4a 5%, transparent), 0 14px 36px -18px color-mix(in oklab, #1d2a4a 18%, transparent); /* Workspace tiles: eight deep gradients that hold white letters above 4.5:1, and none green or orange - those two mean Working and Needs you. */ --ws-tile-1: var(--agent-color-1); --ws-tile-2: var(--agent-color-2); --ws-tile-3: var(--agent-color-3); --ws-tile-4: var(--agent-color-4); --ws-tile-5: var(--agent-color-5); --ws-tile-6: var(--agent-color-6); --ws-tile-7: var(--agent-color-7); --ws-tile-8: var(--agent-color-8); --shadow-composer: 0 -4px 12px color-mix(in oklab, var(--neutral-900) 4%, transparent), 0 -10px 24px color-mix(in oklab, var(--neutral-900) 3%, transparent); --shadow-card: 0 1px 1px color-mix(in oklab, var(--neutral-900) 3%, transparent), 0 2px 4px -1px color-mix(in oklab, var(--neutral-900) 4%, transparent), 0 12px 28px -12px color-mix(in oklab, var(--neutral-900) 14%, transparent); --overlay-scrim: var(--color-scrim-light); /* A focus ring that is plainly there without shouting: 2px of ink at a strength that still clears 3:1 against paper and chrome. */ --focus-ring: 0 0 0 2px var(--surface-stage), 0 0 0 4px color-mix(in oklab, var(--neutral-900) 55%, transparent); --theme-color-meta: var(--neutral-100); --on-accent: var(--neutral-0); /* One owner for the native-select arrow: a