/* ═══════════════════════════════════════════════════════════════════════════ ARTIFICER · Design tokens · v0.24.2 (apothecary × deco × speakeasy) AuDHD-optimized, Ghostty-rooted, with warm Jazz-Age accents. Default theme = dark. Add data-theme="light" on for ivory paper mode. v0.6 palette — locked Nov 2024: • indigo ink #20203e replaces navy #0d1b2a (cooler, richer) • apothecary green #4a8a5e is the one success color (was olive #b7bd73) • brick #a04540 is destructive (was vermillion #c4392a / #e8836f) • copper #b87333 retired from status duty — available decoratively • gold #dbbb6f (was #e0b558) — slightly warmer • rose #c4808a promoted to warning (was #e5afb7) • deep purple #331567 + lifted purple #5a3a9a (replaces lilac #c9b5e8) • steel #b8cad4 (slightly brighter than #9fb6c4) • light: ivory paper #f5ead0 floor, champagne #eddcc0 raised ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ CONTENTS · the map (#78 — primitive roles shouldn't need a grep) Source order. Jump by searching the section banner, e.g. "═══ Buttons" or "NAVIGATION —". Per-primitive role taxonomies live inline in each banner. SETUP Self-hosted fonts · :root design tokens · light mode (@media) · reduced-motion (@media) FOUNDATION Base · Type utilities COMPONENTS Buttons · Cards · Inputs · Badges · Kbd · Dividers · Focus-pane · Selection · Scrollbar · Theme toggle LAYOUT Layout primitives · Overlays (modal & popover) · Form controls (extended) · Data display · States (empty · skeleton · progress) · Accessibility utilities COMPOSITION density modes · table extensions · dashboard layouts · live-update atoms CHARTS tokens + primitives DIAGRAMS primitives for hand-drawn SVG NAVIGATION the spine — .crumb (where am I) · .sidenav (what sections) · .appbar (global chrome) · .tabs (switch view within a surface) BRAND wordmark (lowercase "artificer." + burnished stop) RESPONSIVE breakpoints · touch escalation · safe-area · table reflow PRIMITIVES v0.10.0 — avatar · accordion · selectable rows · date/time ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Self-hosted fonts ────────────────────────────────────────────────── JetBrains Mono — code, identifiers, numerals, dense tool body iA Writer Quattro S / V — the two roles split by surface (see FONTS.md): S is interface chrome (labels, controls, tabular UI numerals), V is body prose. No bare 'iA Writer Quattro' face ships — it was a duplicate of S/V's own glyph set with no role of its own. All SIL OFL 1.1. Files live in src/assets/fonts/. See FONTS.md for the rationale and the Windows faux-bold disposition. */ @font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* iA Writer Quattro S — tabular-numeral variant. Interface chrome: labels, controls, badges, dense tabular UI numerals. Same metrics as Quattro, so the fallback chain doesn't reflow when this variant is missing. */ @font-face { font-family: 'iA Writer Quattro S'; src: url('assets/fonts/ia-writer-quattro-s-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'iA Writer Quattro S'; src: url('assets/fonts/ia-writer-quattro-s-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'iA Writer Quattro S'; src: url('assets/fonts/ia-writer-quattro-s-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'iA Writer Quattro S'; src: url('assets/fonts/ia-writer-quattro-s-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* iA Writer Quattro V — display variant (slightly tighter, more contrast). Body prose face. Only 400 weight ships from iA — a bold body run (headlines set on --font-body) synthesizes faux-bold in the browser, same as any face missing a weight. */ @font-face { font-family: 'iA Writer Quattro V'; src: url('assets/fonts/ia-writer-quattro-v-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'iA Writer Quattro V'; src: url('assets/fonts/ia-writer-quattro-v-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ─── DARK (default) ──────────────────────────────────────────────────── */ :root { /* Surfaces — Ghostty dark grey spine */ --bg: #292c33; /* base surface */ --bg-raised: #313540; /* cards, sidebar */ --bg-overlay: #3c4150; /* modals, command palette */ --bg-inactive: #1d1f21; /* unfocused panes */ /* Foreground — bone, not chrome. Softer than #fff but still AAA. */ --fg: #e8e6e1; /* warm off-white, 11.2:1 on --bg */ --fg-secondary: #c5c8c6; --fg-muted: #5a7a8a; /* steel-blue muted — meta/comment text, between secondary and disabled */ --fg-disabled: #666666; /* Structure */ --border: #4a4f5c; --border-lifted: #5a606e; /* lifted border — diagram rails, perceptible on canvas */ /* ── Jazz Age accents, contrast-tuned for dark bg ──────────────────── */ --accent: #dbbb6f; /* burnished gold — interactive */ --accent-bright: #e3c885; /* hover/focus, slightly lifted */ --accent-fill: #c4932a; /* deep gold, fill-only (buttons, badges, selection) */ --attention: #c4808a; /* dusty rose — "look when you can" */ --attention-fill: #c4808a; /* rose, fill-only */ --urgent: #a04540; /* brick — destructive, errors */ --urgent-fill: #a04540; /* brick fill, buttons */ --urgent-text: #e6a8a2; /* lifted error TEXT (.field>.error) — bg 6.98 AA · v0.19.0 #122-B */ --success: #4a8a5e; /* apothecary green — completed, merged, autoAccept */ --success-fill: #2d6644; /* deep apothecary fill — badges/dots, ivory-on 5.67 AA */ --steel: #b8cad4; /* honest middle; meta / secondary UI */ --steel-fill: #5a7a8a; /* Brand — personal signature (gold + purple = Cameron). Not semantic. bare = deep, NOT a foreground role (chart series-3, whimsy gradient stop). -bright = foreground (syntax keyword). -fill = surface. */ --brand-purple: #5a3a9a; /* deep — chart series-3, whimsy gradient stop */ --brand-purple-bright: #b095e0; /* lifted — syntax keyword foreground · 5.47:1 AA · v0.10.1 */ --brand-purple-fill: #331567; /* deep — surface / button fill */ /* Diff backgrounds — derived tints of success/urgent. Same hue, low L, kept C. */ --diff-add-bg: #1f3a28; /* derived from --success #4a8a5e */ --diff-del-bg: #3a1f1d; /* derived from --urgent #a04540 */ /* Ivory / ink anchors — only used for on-color text */ --ivory: #f5ead0; --ivory-raised: #eddcc0; /* champagne — only meaningful in light mode */ --ink: #20203e; /* midnight indigo — was --navy */ --navy: #20203e; /* alias for back-compat */ /* On-color text — chosen for AAA where possible, strong AA otherwise */ --on-accent: #20203e; /* indigo on gold */ --on-attention: #20203e; /* indigo on rose */ --on-urgent: #f5ead0; /* ivory on brick */ --on-success: #f5ead0; /* ivory on apothecary green */ /* Type, radii, spacing, motion — identical across themes */ --font-mono: 'JetBrains Mono', 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* iA Writer Quattro V — display/body variant. Body prose face: document surfaces, .meta, headline/body type utilities. Falls back to serif → system-ui. */ --font-body: 'iA Writer Quattro V', 'Iowan Old Style', 'Charter', 'Source Sans 3', system-ui, -apple-system, sans-serif; /* iA Writer Quattro S — tabular-numeral variant. Interface chrome face: labels, controls, badges, form fields, nav, tabular UI numerals. */ --font-interface: 'iA Writer Quattro S', 'Iowan Old Style', 'Charter', 'Source Sans 3', system-ui, -apple-system, sans-serif; /* --font-sans is a legacy alias kept resolvable for public-API back-compat — new rules use --font-body or --font-interface directly (see FONTS.md). */ --font-sans: var(--font-body); /* Type sizes are REM (root = browser default, never overridden) so text honors the user's browser font-size preference, not just zoom. 1rem = 16px at default. Spacing/radii/component-internal px stay px on purpose. */ --t-headline-lg-size: 1.75rem; --t-headline-lg-lh: 1.3; --t-headline-lg-ls: -0.01em; /* 28px */ --t-headline-md-size: 1.375rem; --t-headline-md-lh: 1.35; /* 22px */ --t-body-lg-size: 1rem; --t-body-lg-lh: 1.65; /* 16px */ --t-body-md-size: 0.875rem; --t-body-md-lh: 1.6; /* 14px */ --t-label-md-size: 0.8125rem; --t-label-md-lh: 1.3; /* 13px */ --t-label-sm-size: 0.75rem; --t-label-sm-lh: 1.3; /* 12px */ --t-label-xs-size: 0.6875rem; --t-label-xs-lh: 1.3; /* 11px — micro-chrome (v0.9.0 tier; restored v0.10.1) */ --t-code-size: 0.875rem; --t-code-lh: 1.5; /* 14px */ --letter-spacing-body: 0.01em; --word-spacing-body: 0.16em; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* fully-rounded pills: toggle track, chip */ --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; --s-3xl: 96px; --dur-instant: 80ms; --dur-fast: 160ms; --dur-max: 300ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-linear: linear; /* continuous translation only (motion pattern #02) */ /* Focus ring — tokenized so themes/consumers retune; a11y floor: never 0. */ --focus-width: 2px; --focus-offset: 2px; /* default — drawn outside the box */ --focus-offset-loose: 4px; /* sliders / thumbs that need air */ --focus-offset-inset: -2px; /* rings drawn inside (nav items, table rows) */ --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.30); /* z-index scale — six rungs, no improvising */ --z-base: 1; /* in-flow */ --z-raised: 10; /* sticky elements, dropdown triggers */ --z-overlay: 100; /* sidebars, theme toggle */ --z-popover: 1000; /* tooltips, popovers, dropdowns */ --z-modal: 2000; /* dialogs, scrim + content */ --z-toast: 3000; /* always-on-top notifications */ /* Artificer v0.10.1 — baseline contract: see CLAUDE.md § Baseline contract */ --art-version: "0.24.2"; color-scheme: dark; } /* ─── LIGHT — ivory paper floor, champagne raised, indigo ink ────────── */ :root[data-theme="light"] { --bg: #f5ead0; /* ivory paper · the floor */ --bg-raised: #eddcc0; /* champagne · the lifted card */ --bg-overlay: #e4d4b0; /* modal, palette */ --bg-inactive: #dcc99c; /* dimmed panes */ --fg: #20203e; /* midnight indigo */ --fg-secondary: #4a3f2a; /* warm muted */ --fg-muted: #5a7a8a; --fg-disabled: #8a8070; --border: #cbb88a; --border-lifted: #b8a674; /* lifted border — diagram rails */ --accent: #7a5a10; /* deep gold, AA 5.33 on ivory */ --accent-bright: #866010; /* slightly lighter */ --accent-fill: #c4932a; /* standard gold for button fills */ --attention: #8a6618; /* dark gold doubles as attention in light */ --attention-fill: #dbbb6f; --urgent: #8a2418; /* deep brick, AAA on ivory */ --urgent-fill: #a04540; /* brick fill */ --urgent-text: #8a2418; /* = urgent · ivory 7.49 AAA · v0.19.0 #122-B */ --success: #2a5a3a; /* deep apothecary green */ --success-fill: #2a5a3a; /* fill == bare success in light; ivory-on 6.70 AA */ --steel: #2e4a5a; --steel-fill: #5a7a8a; --brand-purple: #4a25a0; /* deep — chart series-3, whimsy gradient stop · 8.51:1 on ivory */ --brand-purple-bright: #5a35b0; /* lifted — syntax keyword foreground · 6.83:1 on ivory · v0.10.1 */ --brand-purple-fill: #331567; /* deep purple, fill */ --diff-add-bg: #d8e4cc; /* derived light tint of apothecary green */ --diff-del-bg: #ecd6d4; /* derived light tint of brick */ --ivory: #f5ead0; --ivory-raised: #eddcc0; --ink: #20203e; --navy: #20203e; /* alias */ --on-accent: #20203e; /* ink on gold-fill button — ivory→ink v0.19.0 #122-A · 5.65 AA */ --on-attention: #20203e; --on-urgent: #f5ead0; --on-success: #f5ead0; --shadow-overlay: 0 4px 12px rgba(32, 32, 62, 0.18); --shadow-popover: 0 2px 8px rgba(32, 32, 62, 0.14); color-scheme: light; } /* Honor OS preference when no explicit theme set */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f5ead0; --bg-raised: #eddcc0; --bg-overlay: #e4d4b0; --bg-inactive: #dcc99c; --fg: #20203e; --fg-secondary: #4a3f2a; --fg-muted: #5a7a8a; --fg-disabled: #8a8070; --border: #cbb88a; --border-lifted: #b8a674; --accent: #7a5a10; --accent-bright: #866010; --accent-fill: #c4932a; --attention: #8a6618; --attention-fill: #dbbb6f; --urgent: #8a2418; --urgent-fill: #a04540; --urgent-text: #8a2418; --success: #2a5a3a; --success-fill: #2a5a3a; --steel: #2e4a5a; --steel-fill: #5a7a8a; --brand-purple: #4a25a0; --brand-purple-bright: #5a35b0; /* v0.10.1 — syntax keyword foreground · 6.83:1 */ --brand-purple-fill: #331567; --diff-add-bg: #d8e4cc; --diff-del-bg: #ecd6d4; --ivory-raised: #eddcc0; --ink: #20203e; --on-accent: #20203e; /* ivory→ink v0.19.0 #122-A */ --on-attention: #20203e; --on-urgent: #f5ead0; --on-success: #f5ead0; --shadow-overlay: 0 4px 12px rgba(32, 32, 62, 0.18); --shadow-popover: 0 2px 8px rgba(32, 32, 62, 0.14); color-scheme: light; } } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-max: 0ms; } } /* ═══ Base ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* The root is NEVER overridden (#211). html stays at the browser preference (100% of the user's setting; 16px by default) so every rem-bound --t-*-size renders at its labeled px and the whole system scales with the preference. The old shared `html, body` font-size silently made the root 14px (every token rendered at 87.5% of its label) and double-applied on body (12.25px). Body takes the body-md default exactly once, here. */ html { font-size: 100%; } html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: var(--t-body-md-lh); letter-spacing: var(--letter-spacing-body); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } body { font-size: var(--t-body-md-size); } /* Tool-surface override: dashboards, terminals, data tables, settings. Apply (or to a top-level container) to flip the body face to mono. Documents inherit the sans default. */ .surface-tool, .surface-tool * { font-family: var(--font-mono); } .surface-tool .btn, .surface-tool .field > label, .surface-tool .field > .hint, .surface-tool .field > .error, .surface-tool .badge, .surface-tool .table th, .surface-tool .checkbox, .surface-tool .radio, .surface-tool .toggle, .surface-tool .theme-toggle, .surface-tool .tooltip { /* labels/hints/microcopy on tool surfaces stay interface-faced, per the rule */ font-family: var(--font-interface); } /* Document island — inverse of .surface-tool. Marks a prose region inside a tool surface that opts its body face back to --font-body (colophons, legal disclaimers, help prose). Sits after .surface-tool, so it wins at equal specificity on source order; class-based components (.stat, .table cells) self-declare mono and win there too. Bare-tag mono declarers (code, kbd) sit at lower specificity than the universal-descendant rule above and lose to it, so they're re-declared explicitly below. */ .surface-document, .surface-document * { font-family: var(--font-body); } /* code/kbd are bare-tag selectors ((0,0,1)) and lose to .surface-document * ((0,1,0)) on specificity, not source order — re-declared here to hold mono. */ .surface-document code, .surface-document kbd { font-family: var(--font-mono); } /* ═══ Type utilities ════════════════════════════════════════════════════ Headlines and body run on --font-body (Quattro V) by default — document mode; label utilities run on --font-interface (Quattro S). On tool surfaces, wrap the surface in <… class="surface-tool"> to flip to mono. .t-mono-* are explicit mono utilities for code blocks and identifier displays. */ .t-headline-lg { font-family: var(--font-body); font-weight: 700; font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--t-headline-lg-ls); color: var(--fg); } .t-headline-md { font-family: var(--font-body); font-weight: 700; font-size: var(--t-headline-md-size); line-height: var(--t-headline-md-lh); color: var(--fg); } .t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); } .t-body-md { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-md-size); line-height: var(--t-body-md-lh); } .t-label-md { font-family: var(--font-interface); font-weight: 500; font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); } .t-label-sm { font-family: var(--font-interface); font-weight: 400; font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); } .t-label-xs { font-family: var(--font-interface); font-weight: 500; font-size: var(--t-label-xs-size); line-height: var(--t-label-xs-lh); } /* micro-chrome: keycaps, timestamps, dense table meta. Never body. */ .t-code { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-code-size); line-height: var(--t-code-lh); color: var(--accent); } .t-mono-headline-lg { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--t-headline-lg-ls); color: var(--fg); } .t-mono-body-md { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-body-md-size); line-height: var(--t-body-md-lh); } .anchor { font-weight: 700; color: var(--fg); } .meta { color: var(--fg-secondary); font-family: var(--font-body); font-size: var(--t-body-md-size); max-width: 66ch; } .note { color: var(--fg-secondary); font-size: var(--t-label-sm-size); } /* inherits body family — mono on tool surfaces, sans on doc surfaces. */ .num { font-variant-numeric: tabular-nums; } /* Doc-page chrome — section header convention promoted from live-spec (10+ identical instances; same shape as the .crumb-at-14 promotion). */ .section-title { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-headline-md-size); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-secondary); margin: var(--s-2xl) 0 var(--s-md); padding-bottom: var(--s-sm); border-bottom: 1px solid var(--border); } code, .code { font-family: var(--font-mono); font-size: 0.95em; color: var(--accent); background: transparent; } a { color: var(--accent); /* #122-E — document surface (default): prose links carry a persistent underline so a link in a text block is distinguished by more than color (WCAG 1.4.1). Chrome and components opt out below / via their own text-decoration:none. */ text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); } a:hover, a:focus-visible { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; } /* Tool surfaces read links by position — underline only on hover/focus (the rule above). */ .surface-tool a { text-decoration: none; } /* .btn--link follows `a` here rather than joining its selector: widening that one to :is(a, .btn--link) would lift it from (0,1,1) to (0,2,0) and could out-order a rule that deliberately re-underlines an anchor. */ .surface-tool .btn--link { text-decoration: none; } a:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); border-radius: 2px; } /* ═══ Buttons ═══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm); font-family: var(--font-interface); font-size: var(--t-label-md-size); font-weight: 500; line-height: 1; padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); } .btn--primary { background: var(--accent-fill); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-bright); } .btn--secondary { background: transparent; color: var(--accent); border-color: var(--accent); } .btn--secondary:hover { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent-bright); border-color: var(--accent-bright); } .btn--ghost { background: transparent; color: var(--fg-secondary); } .btn--ghost:hover { background: var(--bg-raised); color: var(--fg); } /* An action that READS as text.