/* ========================================================================== AgentPlus — tokens.css Single source of truth for every design token. Ported from ui/index.html. THEME STRATEGY The mockup duplicated the palette in 3 blocks (@media dark + [data-theme= light] + [data-theme=dark]) — a guaranteed drift bug. Here every color is declared exactly ONCE via light-dark(); the OS preference is honored by `color-scheme: light dark`, and the explicit user toggle is the single [data-theme] override pair below, which only flips `color-scheme`. (light-dark() is Baseline 2024: Chrome 123+, Firefox 120+, Safari 17.5+.) ========================================================================== */ :root { color-scheme: light dark; /* ---- Ink (text) ------------------------------------------------------- Attio-inspired cool neutrals ("Hunter" near-black with a hint of green). ink primary text ink-soft secondary text / body copy on panels ink-faint labels, timestamps, de-emphasized meta */ --ink: light-dark(#1c1d1f, #f0f1f3); --ink-soft: light-dark(#5e6066, #a5a8ae); --ink-faint: light-dark(#94969c, #6f7278); /* ---- Surfaces ---------------------------------------------------------- The Attio layering: a barely-gray cool canvas under pure-white panels separated by hairlines — cards read "lifted" with almost no shadow. ground app background (cool near-white) panel card / topbar surface (pure white on the gray canvas) panel-2 inset surface (code blocks, previews, hover) */ --ground: light-dark(#f7f8f9, #0d0e10); --panel: light-dark(#ffffff, #16181b); --panel-2: light-dark(#f1f2f4, #1e2126); --line: light-dark(#ebecf0, #282b31); /* Input borders sit one step darker than hairlines so fields read as fields without becoming the main visual element (goal-11 spec §4). */ --line-input: light-dark(#d9dde3, #3a3e45); --line-input-hover: light-dark(#b9c0c9, #4a505a); /* ---- Brand ------------------------------------------------------------- accent restrained teal (focus, active nav, links, data highlights) accent-ink text placed ON the accent accent-soft tinted background for accent-colored chips/mentions gold editorial highlight (cooler than the old paper gold) */ --accent: light-dark(#0e9384, #3fc0af); --accent-ink: light-dark(#ffffff, #06211d); --accent-soft: light-dark(#d9f2ee, #143530); --gold: light-dark(#a87616, #d3a13c); /* ---- Primary action ---------------------------------------------------- Near-black pill (Attio's primary is near-black too); inverts to off-white in dark. Teal stays for status/brand, not the main CTA. */ --btn-primary-bg: light-dark(#1c1d1f, #f2f3f4); --btn-primary-ink: light-dark(#ffffff, #17181a); /* ---- Status ------------------------------------------------------------ ok / warn / alert with tinted -bg pairs for chips and cards */ --ok: light-dark(#1f8a5b, #4cb782); --warn: light-dark(#b0831c, #d9a63b); --warn-bg: light-dark(#f9f0d7, #332a12); --alert: light-dark(#c8483b, #e5766a); --alert-bg: light-dark(#fbe5e2, #3a211d); /* ---- Elevation --------------------------------------------------------- Shadow composed from theme-aware colors so it stays one declaration. Whisper-subtle and cool-tinted: the ground/panel layering + hairlines carry the separation (the Attio move), shadow only floats things. */ --shadow-c1: light-dark(rgba(28, 29, 31, .05), rgba(0, 0, 0, .35)); --shadow-c2: light-dark(rgba(28, 29, 31, .04), rgba(0, 0, 0, .25)); --shadow: 0 1px 2px var(--shadow-c1), 0 4px 14px var(--shadow-c2); /* ---- Agent identity palette -------------------------------------------- Lanyard / avatar colors from the mockup roster. Fixed across themes: they are identity, not chrome. Assign per-agent at hire time. */ --agent-1: #1e6e5a; /* Atlas */ --agent-2: #3d6b9e; /* Sage */ --agent-3: #9e5f3d; /* Nova */ --agent-4: #6b4d9e; /* Echo */ --agent-5: #8a3d5f; /* Scout */ --agent-6: #4f7d3a; /* Piper */ --agent-7: #3a7d78; /* Ledger */ /* ---- Spacing scale (goal-11 spec: 4/8/12/16/20/24/32/40/48) ------------ The ONLY gaps/paddings allowed anywhere. Exceptions require a named component, never a one-off margin (spec §3). 1 icon micro-gap · 2 label→field · 3 related controls · 4 sidebar/ mobile inset · 5 dense card padding · 6 default card padding + field groups · 8 desktop page inset + sections · 10 major form sections · 12 major page sections (sparingly). */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ---- Type scale (11 / 12 / 13 / 14 / 16 / 19 / 24) --------------------- Replaces the mockup's ad-hoc 10/11/11.5/12/12.5/13/13.5px soup. xs labels, chips, table headers, timestamps sm meta, badges, secondary rows md panel copy, buttons, small UI base body default lg card subtitles, lead paragraphs xl card titles, wordmark (serif) 2xl page h1, stat values (serif for headings) */ /* Raised one step across the board (Jul 2026). The old 11/12/13/14 scale read as cramped on a wide desktop canvas — body copy at 14px over a 68ch measure, labels at 13px and hints at 12px made whole pages feel small. Everything moves up ~1px and the page title jumps 24 → 28 so the h1 is unambiguously the largest thing on the page. */ --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 28px; --leading-tight: 1.25; --leading-normal: 1.5; /* ---- Type faces --------------------------------------------------------- Serif = the editorial brand voice (system stack, zero font fetch). Palatino Linotype covers Windows; Georgia is the universal floor. */ --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; /* ---- Shape --------------------------------------------------------------*/ --radius: 12px; /* panels, cards */ --radius-sm: 8px; /* inputs, nav */ --radius-xs: 4px; /* badges, inline marks */ --radius-pill: 999px; /* chips, pills */ /* ---- Layout chrome ------------------------------------------------------*/ --sidebar-w: 252px; --topbar-h: 52px; --tabbar-h: 56px; /* mobile bottom tab bar */ /* ---- Focus / motion ----------------------------------------------------- Craft-tier motion vocabulary (see docs: UI & Interaction Brief). dur-fast hover/press feedback, ⌘K, tooltips (~120ms) dur menus, popovers, small reveals (~160ms) dur-slow modals, page enters, larger surfaces (~220ms) ease-out the default for everything entering/changing ease-sheet the iOS-sheet curve for drawers/bottom sheets */ --focus-ring: 2px solid var(--accent); --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-sheet: cubic-bezier(.32, .72, 0, 1); --dur-fast: 120ms; --dur: 160ms; --dur-slow: 220ms; /* ---- Shape (cont.) — was referenced by components.css but undefined */ --radius-md: 14px; } /* The ONE explicit-theme override pair. The topbar toggle stamps data-theme on ; everything else resolves through light-dark(). */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ========================================================================== Density (T-935). Comfortable is the default; "compact" tightens the two large spacing steps, chrome heights and base type — agency/power users. Toggled via data-density on , persisted like the theme. ========================================================================== */ :root[data-density="compact"] { --space-4: 12px; --space-5: 16px; --space-6: 20px; /* Tracks the comfortable scale one step down, not the old absolute values. */ --text-base: 14px; --text-lg: 16px; --text-2xl: 24px; --topbar-h: 46px; --sidebar-w: 232px; --radius: 10px; } /* ========================================================================== "Paper" theme — the original warm editorial palette (cream ground, green accent, warm ink), kept selectable after the Attio-style cool scheme became the default. Declared with light-dark() pairs, so Paper still honors the OS light/dark preference. ========================================================================== */ :root[data-theme="paper"] { color-scheme: light dark; --ink: light-dark(#1c1b17, #ecebe6); --ink-soft: light-dark(#57544a, #a9a59a); --ink-faint: light-dark(#807c6f, #7e7a6e); --ground: light-dark(#f6f5f0, #1b1a17); --panel: light-dark(#ffffff, #232220); --panel-2: light-dark(#efede6, #2b2a26); --line: light-dark(#e8e6de, #33312c); --accent: light-dark(#1e6e5a, #4fa98c); --accent-ink: light-dark(#ffffff, #0d1512); --accent-soft: light-dark(#e2efea, #1d332b); --gold: #d9a63b; --btn-primary-bg: light-dark(#1c1b17, #f2f1ec); --btn-primary-ink: light-dark(#ffffff, #1b1a17); --ok: light-dark(#25784f, #58b183); --warn: light-dark(#b07c18, #d9a63b); --warn-bg: light-dark(#f6ecd6, #33290f); --alert: light-dark(#b03a2e, #e07a6e); --alert-bg: light-dark(#f6dedb, #3a201c); --shadow-c1: light-dark(rgba(28, 27, 23, .04), rgba(0, 0, 0, .35)); --shadow-c2: light-dark(rgba(28, 27, 23, .03), rgba(0, 0, 0, .25)); --shadow: 0 1px 2px var(--shadow-c1), 0 4px 14px var(--shadow-c2); } /* ========================================================================== "Wellife" theme — a full, self-contained palette selectable from the topbar theme menu. Unlike light/dark (which resolve through light-dark()), this is a fixed lilac palette that overrides every color token directly. Derived from the Wellife wellness-dashboard reference: lavender/purple as the brand accent, buttercup yellow as the warm highlight, near-black ink on light-lilac paper, and roomier card radii. ========================================================================== */ :root[data-theme="wellife"] { color-scheme: light; --ink: #221f33; /* near-black, faint violet cast */ --ink-soft: #565170; --ink-faint: #8b87a0; --ground: #f2f1f8; /* light lilac paper */ --panel: #ffffff; --panel-2: #f4f3fa; --line: #eceaf4; --accent: #6c56e6; /* lavender/purple — active nav, links, brand, focus */ --accent-ink: #ffffff; /* white text passes AA on the accent */ --accent-soft: #ece9fd; /* lilac chip / mention background */ --gold: #f4d97a; /* buttercup highlight (the calorie bars) */ --btn-primary-bg: #211d33; /* near-black pill, like the reference's active nav */ --btn-primary-ink: #ffffff; --ok: #4f9d7a; --warn: #b8912e; --warn-bg: #fbf1d4; --alert: #d76a5e; --alert-bg: #f8e2df; /* Softer, more colored elevation than the paper theme's hairlines. */ --shadow-c1: rgba(60, 50, 110, .07); --shadow-c2: rgba(60, 50, 110, .05); --shadow: 0 1px 2px var(--shadow-c1), 0 8px 24px var(--shadow-c2); /* Roomier cards — the reference's signature soft geometry. */ --radius: 16px; --radius-sm: 10px; } /* ========================================================================== "Studio" theme — a crisp, minimal, high-whitespace palette (the AgentPlus marketing aesthetic brought into the app). White canvas, hairline borders, near-black ink and a single refined indigo accent. Same override strategy as Wellife: every token declared directly. ========================================================================== */ :root[data-theme="studio"] { color-scheme: light; --ink: #17161c; /* near-black, faint cool cast */ --ink-soft: #57565f; --ink-faint: #8f8e99; --ground: #ffffff; /* pure white canvas */ --panel: #ffffff; --panel-2: #f5f5f7; /* inset / hover */ --line: #eceaf0; /* hairline borders */ --accent: #5b57d6; /* refined indigo — active nav, links, focus */ --accent-ink: #ffffff; --accent-soft: #ecebfb; /* chip / mention background */ --gold: #b5761f; /* warm editorial highlight */ /* Near-black primary pill (matches the landing + auth CTAs). */ --btn-primary-bg: #17161c; --btn-primary-ink: #ffffff; --ok: #1f8a5b; --warn: #b0831c; --warn-bg: #faf0d6; --alert: #c8483b; --alert-bg: #fbe4e1; /* Whisper-quiet elevation; hairline borders carry the separation. */ --shadow-c1: rgba(21, 20, 33, .05); --shadow-c2: rgba(21, 20, 33, .06); --shadow: 0 1px 2px var(--shadow-c1), 0 10px 30px var(--shadow-c2); --radius: 14px; --radius-sm: 10px; --radius-xs: 6px; } /* ========================================================================== GOAL-10 · T-1050 — GEOMETRY TOKEN CONTRACT (lane T1). APPEND-ONLY SECTION. Layout tokens every lane consumes (goal-10 execution contracts): content max 1200 · form measure 760 · gutters 24/32/16 · control heights 40/36/44 · radii 8/12/16 (control/card/modal). RADII map onto the goal-5 shape tokens rather than duplicating meaning: --radius-control → --radius-sm (8px) inputs, buttons, selects --radius-card → --radius (12px) panels, cards --radius-modal → 16px modals, sheets (no prior token) Themes that override --radius-sm/--radius (wellife, studio, compact density) therefore restyle controls/cards through these aliases too — that is intentional: one meaning, one knob. SPACING: the goal-5 scale (--space-1..5 = 4/8/12/16/24) is extended with the two large steps the audit contract names (32/48). The full allowed scale is 4 / 8 / 12 / 16 / 24 / 32 / 48 — nothing else in component CSS. ========================================================================== */ :root { /* Measures */ --measure-content: 1200px; /* max content width on full-bleed pages */ --measure-form: 760px; /* single-column form measure (720–800 ok) */ /* Gutter — responsive: 24 laptop (default) / 32 desktop / 16 mobile. Overridden in the @media blocks below; consume via .page-gutter. */ --gutter: 24px; /* Control heights */ --control-h: 40px; /* default input/button baseline */ --control-h-compact: 36px; /* dense tables, toolbars */ --control-h-mobile: 44px; /* touch minimum at mobile widths */ /* Radii — aliases onto the existing shape tokens (see header note) */ --radius-control: var(--radius-sm); --radius-card: var(--radius); --radius-modal: 16px; /* (goal-11) The large spacing steps live in the base scale now: --space-8 (32) and --space-12 (48). No local definitions here. */ } /* Desktop (≥1440px): roomier gutter. */ @media (min-width: 1440px) { :root { --gutter: 32px; } } /* Mobile (≤768px): tight gutter + touch-height controls become the default control height so consumers of --control-h get 44px free. */ @media (max-width: 768px) { :root { --gutter: 16px; --control-h: var(--control-h-mobile); } }