/* ============================================================================
FRAIMORA DESIGN SYSTEM — TOKENS
Light theme by default; dark and system themes in section 13.
Manrope + Geist Mono. Rules for agents: DESIGN.md (demoapp/design-system).
Load order:
1. fonts
2. tokens.css <- this file, nothing but custom properties
3. base.css / app styles
Fonts:
Rule of thumb: components reference SEMANTIC tokens (--fx-text, --fx-accent,
--fx-cta-bg). Primitives (--fx-purple-500) are referenced only inside this
file. If a component needs a primitive directly, a semantic token is missing.
============================================================================ */
:root{
/* ==========================================================================
1. PRIMITIVES — raw ramps. Do not use directly in components.
========================================================================== */
/* --- Purple · state -------------------------------------------------- */
--fx-purple-50:#F4F2FE;
--fx-purple-100:#E9E6FB;
--fx-purple-200:#D3CDF6;
--fx-purple-300:#ADA3EE;
--fx-purple-400:#8478E2;
--fx-purple-500:#5B4FCF;
--fx-purple-600:#4B40B4;
--fx-purple-700:#3D3494;
--fx-purple-800:#2E2770;
/* --- Peach · data. Light-only scale; it stops at 500 on purpose. ------ */
--fx-peach-50:#FFF5F1;
--fx-peach-100:#FFE6DC;
--fx-peach-200:#FFCFBD;
--fx-peach-300:#FFB79B;
--fx-peach-400:#FF947A;
--fx-peach-500:#F0765A;
--fx-peach-ink:#562A19; /* body copy on peach surfaces · 11.3:1 on peach-50 */
/* --- Graphite · action ----------------------------------------------- */
--fx-graphite-400:#4E4E5B;
--fx-graphite-500:#3C3C47;
--fx-graphite-600:#2D2D38;
/* --- Neutrals --------------------------------------------------------- */
--fx-white:#FFFFFF;
--fx-grey-25:#FAFBFC;
--fx-grey-50:#F5F6F8;
--fx-grey-100:#EFF1F4;
--fx-grey-150:#EDEFF2;
--fx-grey-200:#E1E4E9;
--fx-grey-300:#CFD4DB;
--fx-grey-400:#8F959E;
--fx-grey-500:#6E7581;
--fx-grey-600:#666E7A;
--fx-grey-700:#4A515C;
--fx-grey-900:#14171C;
/* ==========================================================================
2. SURFACES & LINES
========================================================================== */
--fx-canvas:var(--fx-grey-50); /* page background */
--fx-surface:var(--fx-white); /* cards, rows, menus, toasts */
--fx-surface-2:var(--fx-grey-25); /* rails, table row hover */
--fx-surface-sunken:var(--fx-grey-100); /* tracks, segmented, ghost hover */
--fx-border:var(--fx-grey-200); /* container edges */
--fx-border-strong:var(--fx-grey-300); /* emphasis, card hover */
--fx-border-hair:var(--fx-grey-150); /* row separators */
--fx-border-control:var(--fx-grey-400); /* interactive edges · 3.1:1 */
/* ==========================================================================
3. TEXT — four levels, all of them readable.
Hierarchy comes from size, weight and case, not from pale grey.
========================================================================== */
--fx-text:var(--fx-grey-900); /* 18.0:1 · primary copy */
--fx-text-2:var(--fx-grey-700); /* 8.0:1 · secondary copy */
--fx-text-muted:var(--fx-grey-600); /* 5.2:1 · captions, hints */
--fx-text-faint:var(--fx-grey-500); /* 4.6:1 · mono caps, ids, ticks */
--fx-text-on-dark:var(--fx-white);
/* ==========================================================================
4. SEMANTIC ROLES
Graphite acts. Purple marks state. Peach labels data.
========================================================================== */
/* --- Primary action --------------------------------------------------- */
--fx-cta-bg:var(--fx-graphite-500); /* 10.9:1 with white */
--fx-cta-hover:var(--fx-graphite-400);
--fx-cta-press:var(--fx-graphite-600);
--fx-cta-fg:var(--fx-white);
/* --- State: focus, selection, "you are here" -------------------------- */
--fx-accent:var(--fx-purple-500); /* focus ring, active icon, logo */
--fx-accent-hover:var(--fx-purple-600);
--fx-accent-press:var(--fx-purple-700);
--fx-accent-text:var(--fx-purple-700); /* links, active nav label */
--fx-accent-tint:var(--fx-purple-50); /* active row, selected record */
--fx-accent-tint-2:var(--fx-purple-100); /* tint border */
/* --- Action tiers ------------------------------------------------------
Ghost by default. Graphite is the PRIMARY action of a screen.
Brand purple marks the NEXT LOGICAL STEP in the flow, and it appears only
when a screen carries more than two primary actions: two graphite buttons
read fine side by side, three read as noise. At most one brand button per
screen, and it is always the step the user would take next, never merely
the most important one.
Editor: Save is graphite, Export is brand (the step after finalising).
Test and Grow carry one primary action each, so both stay graphite. ----- */
--fx-brand-bg:var(--fx-purple-600); /* 7.4:1 with white */
--fx-brand-hover:var(--fx-purple-700);
--fx-brand-press:var(--fx-purple-800);
--fx-brand-fg:var(--fx-white);
/* --- Data emphasis. Never a control: peach-400 is 2.2:1 on white. ------ */
--fx-data-emphasis:var(--fx-peach-400); /* HERO facings, fill bars */
--fx-data-emphasis-tint:var(--fx-peach-100); /* HERO / opportunity tags */
--fx-data-emphasis-bd:var(--fx-peach-200);
--fx-data-emphasis-surface:var(--fx-peach-50); /* empty states, callouts */
--fx-data-emphasis-ink:var(--fx-peach-ink); /* body copy on the above */
/* Small type on a peach tint takes --fx-text, not the ink: below ~13px the
warmth is not legible and the neutral is simply higher contrast. */
/* ==========================================================================
5. STATUS — each one a triple: solid / tint / foreground.
The foreground is legible, so status is always stated in words too.
========================================================================== */
--fx-ok-solid:#12805C; --fx-ok-bg:#E6F5EF; --fx-ok-fg:#0B6047; --fx-ok-bd:#C9E7DB;
--fx-warn-solid:#A66A00; --fx-warn-bg:#FEF3DC; --fx-warn-fg:#7A4E06; --fx-warn-bd:#F2E0B8;
--fx-err-solid:#C2382F; --fx-err-bg:#FDECEA; --fx-err-fg:#9B2C24; --fx-err-bd:#F6D3CF;
--fx-err-press:#FBDFDC;
/* ==========================================================================
6. DATA SERIES — categorical, in order.
1 is the primary measure, 2 is the comparison, 6 is "other".
========================================================================== */
--fx-viz-1:#5B4FCF;
--fx-viz-2:#FF947A;
--fx-viz-3:#4B9E8F;
--fx-viz-4:#8478E2;
--fx-viz-5:#E0B15C;
--fx-viz-6:#7D8794;
/* Muted shelf-zone papers: tint / border / readable ink. */
--fx-zone-1:#EAE8F9; --fx-zone-1-bd:#C0BBED; --fx-zone-1-ink:#3D3494;
--fx-zone-2:#FFEFEA; --fx-zone-2-bd:#FFC9BD; --fx-zone-2-ink:#562A19;
--fx-zone-3:#E8F3F1; --fx-zone-3-bd:#BBDAD4; --fx-zone-3-ink:#276458;
--fx-zone-4:#EFEFFD; --fx-zone-4-bd:#C8C3F4; --fx-zone-4-ink:#4B408F;
--fx-zone-5:#FBF5EC; --fx-zone-5-bd:#F3DAB9; --fx-zone-5-ink:#6B4B13;
--fx-zone-6:#EFF0F2; --fx-zone-6-bd:#CFD2D7; --fx-zone-6-ink:#3D4650;
/* ==========================================================================
7. TYPOGRAPHY
Manrope carries the interface. Geist Mono carries anything measurable:
cm, %, SKU ids, seeds, versions. Prose never uses mono.
========================================================================== */
--fx-font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--fx-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--fx-fs-display:34px; --fx-lh-display:1.12; --fx-ls-display:-0.038em; --fx-fw-display:800;
--fx-fs-h1:22px; --fx-lh-h1:1.25; --fx-ls-h1:-0.028em; --fx-fw-h1:700;
--fx-fs-h2:16px; --fx-lh-h2:1.35; --fx-ls-h2:-0.02em; --fx-fw-h2:700;
--fx-fs-h3:14px; --fx-lh-h3:1.4; --fx-ls-h3:-0.02em; --fx-fw-h3:700;
--fx-fs-body:14px; --fx-lh-body:1.55; --fx-ls-body:-0.006em; --fx-fw-body:400;
--fx-fs-small:12.5px; --fx-lh-small:1.5; --fx-fw-small:500;
--fx-fs-label:10.5px; --fx-ls-label:0.11em; --fx-fw-label:600;
--fx-fs-num:20px; --fx-ls-num:-0.025em; --fx-fw-num:600;
--fx-fs-kpi:27px; --fx-ls-kpi:-0.035em;
--fx-fs-kpi-unit:13px;
/* ==========================================================================
8. GEOMETRY — 4px base grid.
Buttons and inputs are two steps softer than the rows they sit among.
That difference is what makes them read as pressable.
========================================================================== */
--fx-r-xs:4px; /* tags, chips, small marks */
--fx-r-sm:6px; /* nav rows, menu items */
--fx-r-btn:8px; /* buttons, inputs, dropdowns, segmented */
--fx-r-md:8px; /* cards, menus, toasts */
--fx-r-lg:10px; /* panels, page containers */
--fx-r-round:999px; /* dots, progress bars, avatars — ONLY these */
--fx-h-control:34px; /* buttons, inputs, dropdowns */
--fx-h-control-sm:28px; /* toolbar and inline actions */
--fx-h-row:40px; /* table rows, nav items */
--fx-space-1:4px;
--fx-space-2:8px;
--fx-space-3:12px;
--fx-space-4:16px;
--fx-space-5:24px;
--fx-space-6:32px;
--fx-pad-card:18px;
--fx-gap:16px;
--fx-sidebar-w:236px;
--fx-sidebar-w-collapsed:62px;
/* Elevation: flat is the default. Shadow only for things that float above
the page — menus, toasts, popovers. If it scrolls with the page, no shadow. */
--fx-shadow-pop:0 1px 2px rgba(16,20,28,.06),0 8px 24px rgba(16,20,28,.08);
--fx-shadow-thumb:0 1px 2px rgba(16,20,28,.09);
--fx-focus-ring:0 0 0 3px var(--fx-accent-tint);
--fx-focus-ring-err:0 0 0 3px var(--fx-err-bg);
--fx-focus-outline:2px solid var(--fx-accent);
/* ==========================================================================
9. MOTION
Motion confirms an action or keeps a moving object trackable.
If nobody touched it, it does not move. Nothing loops at rest.
========================================================================== */
--fx-dur-tick:90ms; /* press release */
--fx-dur-press:40ms; /* press down */
--fx-dur:140ms; /* colour, hover, menu open */
--fx-dur-slow:220ms; /* sidebar collapse */
--fx-dur-slide:280ms; /* segmented thumb travel */
--fx-ease:cubic-bezier(.2,.6,.35,1);
--fx-ease-slide:cubic-bezier(.32,.72,0,1);
--fx-press-scale:.972;
--fx-slide-inset:3px;
/* ==========================================================================
10. Z-INDEX
========================================================================== */
--fx-z-sticky:50;
--fx-z-menu:60;
--fx-z-popover:70;
--fx-z-toast:80;
}
/* ============================================================================
Reduced motion. Every transition in the system is decorative — the interface
is fully usable without any of them.
============================================================================ */
@media (prefers-reduced-motion: reduce){
:root{
--fx-dur-tick:0ms;
--fx-dur-press:0ms;
--fx-dur:0ms;
--fx-dur-slow:0ms;
--fx-dur-slide:0ms;
--fx-press-scale:1;
}
}
/* ============================================================================
11. RESPONSIVE LAYER — DECIDED DIRECTIONS (2026-09-08)
Picked from the "Shelf Interface Lab" exploration artifact — full
rationale, rejected alternatives and live demos live there, not here.
This block is only the part that has to survive into a real build: the
chosen direction per area, the new tokens it needs, and the class
names to reuse so nobody re-derives or drifts from them later.
Artifact: https://claude.ai/code/artifact/cae37eb6-31f9-4a4c-a00c-a075ae17e518
Implemented 2026-09-08: styles.css "v12 · responsive & interaction
polish" block, fx/thinking.js (inline pill), fx/picker.js (attachNative
sweep). index.html cache-busting bumped to styles.css?v=19,
fx/thinking.js?v=3, fx/picker.js?v=13.
============================================================================ */
:root{
--fx-icon-stroke:1.6px; /* icons — locks today's hand-drawn weight */
--fx-ease-settle:cubic-bezier(.16,1,.3,1); /* stage transitions — exponential ease-out */
--fx-stagger-step:35ms; /* stage transitions — per-child reveal delay */
--fx-scrim-soft:rgba(20,23,28,.06); /* loader — replaces the .55 full-viewport scrim */
}
/* Sidebar → Seam + grouped blocks.
Recessed seam (--fx-surface-2 + inset shadow) drops the rail one plane
behind the canvas; nav rows gain a mono group label above each cluster.
Build as: .sidebar--seam. Group labels reuse the existing markup shape
nav-registry.js already renders, just styled. */
/* Analyze/Generate loader → Inline pill.
Replaces fxThinking's full-viewport scrim + modal transcript. Shelf stays
visible behind --fx-scrim-soft; one line of status text, no forced
reading. Build as: .think-pill. The "reassembling" mark is a 3x3 grid,
clockwise chase, 8 cells x 220ms = 1.76s loop — not a spinner/sparkle.
Docked variant (persistent, expandable transcript) for long Master Data
ops specifically; inline pill everywhere else. */
/* Right-rail lists → Fade mask, idle-hidden thumb.
Applies to ows-must-list, ows-skew-list, ows-ledger-list,
opp-variants-list, filters-panel. mask-image fade at the scroll edge;
scrollbar-color transparent at rest, colored on hover/scroll. Pure CSS,
no JS. ows-ledger-list and opp-variants-list additionally get a
collapsible section (count in the header) since they grow unbounded. */
/* Dropdowns → Unified listbox.
Extends the existing fx/picker.js (.fxp-*) pattern to every remaining
native