/* ========================================================
AANN / Cooper — Design Tokens
Two layers: primitive scales + semantic aliases.
Components MUST reference semantics.
======================================================== */
:root,
[data-theme="dark"] {
/* ============================================================
Brand identity — white-label tokens.
Override these per-tenant to swap "Cooper" for any client's
AI consultant name. Mark uses the first letter by convention
(e.g. C, A, N) — explicit override available.
CSS: body { --brand-name: "Aria"; }
HTML:
Runtime: Brand.set({ name: "Aria", mark: "A" })
Markup:
============================================================ */
--brand-name: "Cooper";
--brand-mark: "C";
--brand-sub: "AI Consultant";
--brand-product: "AANN"; /* platform name above the consultant */
/* ---- Brand color ---- */
--color-brand-50: #EDF0FF;
--color-brand-100: #DBE2FA;
--color-brand-200: #B6C6EE;
--color-brand-300: #A4C9FF;
--color-brand-400: #8091B5;
--color-brand-500: #5095E7;
--color-brand-600: #364767;
--color-brand-700: #1A2B4A;
--color-brand-800: #00315D;
--color-brand-900: #002C54;
--color-brand-950: #081B39;
/* ---- Neutral ---- */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #EDF0FF;
--color-neutral-100: #DBE2FA;
--color-neutral-200: #C5C6CF;
--color-neutral-300: #94A3B8;
--color-neutral-400: #64748B;
--color-neutral-500: #475569;
--color-neutral-600: #3F475A;
--color-neutral-700: #2D3547;
--color-neutral-750: #222A3C;
--color-neutral-800: #1E2738;
--color-neutral-850: #181F31;
--color-neutral-900: #131B2D;
--color-neutral-950: #0F1729;
--color-neutral-1000: #0B1324;
--color-neutral-1100: #060E1F;
/* ---- Status ---- */
--color-success-100: #DFF2DE;
--color-success-300: #6DD39D;
--color-success-500: #14AE5C;
--color-success-700: #0A7536;
--color-success-900: #033716;
--color-warning-100: #FFEECF;
--color-warning-300: #FFCB76;
--color-warning-500: #FFA726;
--color-warning-700: #A66614;
--color-warning-900: #4D2C07;
--color-error-100: #FCCCD8;
--color-error-300: #F0668B;
--color-error-500: #DB0743;
--color-error-700: #930031;
--color-error-900: #460019;
--color-info-100: #CCE6FF;
--color-info-300: #66B3FF;
--color-info-500: #0080FF;
--color-info-700: #005CA6;
--color-info-900: #002F4D;
/* Revert / "destructive but not error" — the action of rolling back, undoing,
reverting an approval. Lavender-purple, shared lineage with --chart-5.
Used by .pc-rd-action--revert in the response/session decision modal. */
--color-revert-300: oklch(72% 0.16 295);
--color-revert-500: oklch(60% 0.16 295);
--color-revert-700: oklch(28% 0.10 295);
/* ---- Semantic — Surface ---- */
--bg-canvas: var(--color-neutral-1000);
--bg-canvas-deep: var(--color-neutral-1100); /* darker than canvas — modals, deep wells */
--bg-surface: var(--color-neutral-900);
--bg-surface-raised: var(--color-neutral-850);
--bg-surface-row: var(--color-neutral-750); /* table rows, list-item bg, sub-rows */
--bg-surface-elevated: var(--color-neutral-700); /* hover states, popovers above raised */
--bg-surface-sunken: var(--color-neutral-1100);
--bg-input: var(--color-neutral-850);
--bg-overlay-brand: rgba(164,201,255,0.10);
--bg-overlay-brand-soft: rgba(164,201,255,0.05);
--bg-overlay-brand-strong: rgba(164,201,255,0.20);
--bg-overlay-light: rgba(255,255,255,0.05); /* highlighted-row treatment */
--bg-scrim-modal: rgba(2,6,14,0.66); /* modal/popover backdrop, paired with backdrop-filter: blur(4px) */
--bg-status-warning: rgba(255,167,38,0.12);
--bg-status-error: rgba(240,102,139,0.12);
--bg-status-success: rgba(20,174,92,0.12);
--bg-status-info: rgba(102,179,255,0.12);
--bg-status-revert: oklch(28% 0.10 295 / 0.4); /* revert-action hover surface */
--gradient-brand: linear-gradient(135deg, var(--color-brand-300) 0%, var(--color-brand-500) 100%);
--gradient-canvas-fade: linear-gradient(180deg, var(--color-neutral-900) 0%, rgba(19,27,45,0) 100%);
--gradient-pulse: linear-gradient(90deg, rgba(164,201,255,0) 0%, var(--color-brand-300) 50%, rgba(164,201,255,0) 100%); /* listening / processing sweep */
--gradient-overlay-fade: linear-gradient(180deg, var(--color-neutral-1000) 0%, rgba(11,19,36,0) 100%); /* dimming overlay above content */
/* ---- Semantic — Text ---- */
--text-primary: var(--color-neutral-0);
--text-secondary: var(--color-neutral-100);
--text-tertiary: var(--color-neutral-200);
--text-muted: var(--color-neutral-300);
--text-disabled: var(--color-neutral-400);
--text-brand: var(--color-brand-300);
--text-on-brand: var(--color-brand-800);
--text-on-success: #021A0C; /* high-contrast text laid over --color-success-500 fills */
--text-telemetry: rgba(197,198,207,0.6);
/* ---- Semantic — Border ---- */
--border-subtle: rgba(68,71,78,0.10);
--border-default: rgba(68,71,78,0.20);
--border-strong: rgba(68,71,78,0.40);
--border-brand: var(--color-brand-300);
--border-brand-strong: var(--color-brand-500);
--border-brand-deep: var(--color-brand-900);
--border-active: var(--color-brand-300); /* canonical active outline */
--border-warning: var(--color-warning-300);
--border-error: var(--color-error-300);
/* ---- Charts (categorical 5-step + sequential 3-step) ---- */
--chart-1: var(--color-brand-300);
--chart-2: var(--color-brand-500);
--chart-3: var(--color-success-500);
--chart-4: var(--color-warning-500);
--chart-5: #C084FC; /* accent-purple, sanctioned for charts only */
--chart-seq-1: var(--color-brand-200);
--chart-seq-2: var(--color-brand-300);
--chart-seq-3: var(--color-brand-500);
/* ---- Spacing (4px base) ---- */
--space-0: 0;
--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;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ---- Radii ---- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 40px;
--radius-pill: 9999px;
--radius-sheet: 24px; /* canonical bottom-sheet top-corner radius */
/* ---- Typography ---- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Roboto Mono', 'SF Mono', Menlo, monospace;
/* ---- Type weights (lock; do not invent new weights) ---- */
--font-weight-light: 300; /* listening / ambient copy ONLY */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-mono-weight: 500; /* mono is locked to 500 — no bold variant */
/* ---- Caption / meta type recipe (10px Inter / 500) ---- */
--text-meta-size: 10px; --text-meta-line: 14px; --text-meta-weight: 500;
/* ---- Body / UI type scale (Inter — for prose, labels, controls) ---------------
This is a CANONICAL scale lifted from the persona-console + persona-mobile
stylesheets. Components SHOULD use these tokens instead of raw px values for
font-size and line-height; if a value isn't on the scale, that's a smell.
• micro (9px) — uppercase mono captions, glyph labels in tight chrome
• mini (11px) — mono captions, scorecard caps, persona-rail meta
• base (13px) — default body / control text (search prompt, nav links)
• sm (14px) — drawer link text, mobile recent-title
• md (16px) — page lede / paragraph copy
• lg (18px) — panel title, mobile stat-md
• xl (22px) — section subhead, mobile stat-lg
• 2xl (28px) — mobile display num
------------------------------------------------------------------- */
--text-body-micro-size: 9px; --text-body-micro-line: 12px;
--text-body-mini-size: 11px; --text-body-mini-line: 16px;
--text-body-base-size: 13px; --text-body-base-line: 20px;
--text-body-sm-size: 14px; --text-body-sm-line: 20px;
--text-body-md-size: 16px; --text-body-md-line: 28px;
--text-body-lg-size: 18px; --text-body-lg-line: 24px;
--text-body-xl-size: 22px; --text-body-xl-line: 28px;
--text-body-2xl-size: 28px; --text-body-2xl-line: 32px;
/* ---- Display / stat tokens (Roboto Mono — for big numbers) ---- */
--text-num-sm-size: 14px; --text-num-sm-line: 20px; --text-num-sm-weight: 500;
--text-num-md-size: 20px; --text-num-md-line: 24px; --text-num-md-weight: 500;
--text-stat-xs-size: 24px; --text-stat-xs-line: 28px; --text-stat-xs-weight: 500;
--text-stat-sm-size: 36px; --text-stat-sm-line: 40px; --text-stat-sm-weight: 500;
--text-stat-md-size: 48px; --text-stat-md-line: 52px; --text-stat-md-weight: 500;
--text-stat-lg-size: 64px; --text-stat-lg-line: 64px; --text-stat-lg-weight: 500;
--text-stat-xl-size: 80px; --text-stat-xl-line: 80px; --text-stat-xl-weight: 500;
/* ---- Type floor: 10px is the absolute minimum. Anything smaller fails review. ---- */
/* ---- Motion ---- */
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-standard: cubic-bezier(.2,.8,.2,1);
--ease-emphasized: cubic-bezier(.3,.7,0,1);
/* ---- Shadows (modal + brand glow only) ---- */
--shadow-modal: 0 24px 48px rgba(0,0,0,0.4);
--shadow-drop-md: 0 24px 48px rgba(0,0,0,0.6);
--shadow-drop-lg: 0 32px 64px rgba(0,0,0,0.5);
--shadow-brand: 0 0 24px rgba(164,201,255,0.20);
/* ---- Component recipes ---- */
--ring-avatar: 0 0 0 4px var(--bg-canvas); /* avatar ring against canvas (box-shadow form) */
--ring-cooper: 2px solid var(--color-brand-300); /* Cooper-mark idle ring */
--ring-cooper-offset: 2px; /* gap between mark and ring */
}
[data-theme="light"] {
--bg-canvas: #F7F8FB;
--bg-canvas-deep: #E8ECF5;
--bg-surface: #FFFFFF;
--bg-surface-raised: #FFFFFF;
--bg-surface-row: #F2F4FA;
--bg-surface-elevated:#FFFFFF;
--bg-surface-sunken: #EDF0FF;
--bg-input: #F7F8FB;
--bg-overlay-brand: rgba(0,49,93,0.06);
--bg-overlay-brand-soft: rgba(0,49,93,0.03);
--bg-overlay-brand-strong: rgba(0,49,93,0.12);
--bg-overlay-light: rgba(11,19,36,0.04);
--text-primary: #0B1324;
--text-secondary: #131B2D;
--text-tertiary: #475569;
--text-muted: #64748B;
--text-disabled: #94A3B8;
--text-brand: var(--color-brand-800);
--text-on-brand: #FFFFFF;
--text-telemetry: rgba(71,85,105,0.7);
--border-subtle: rgba(11,19,36,0.06);
--border-default: rgba(11,19,36,0.12);
--border-strong: rgba(11,19,36,0.24);
--border-active: var(--color-brand-800);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* ============================================================
Brand mark — the "C" tile.
Single source of truth across every surface (Idle State left rail
collapsed/expanded, mobile drawer head, persona consoles).
Default = 28px (in-rail / inline). Use .brand-mark--lg for 32px,
.brand-mark--sm for 24px (collapsed-rail tap target).
============================================================ */
.brand-mark {
display: inline-grid; place-items: center;
width: 28px; height: 28px;
border-radius: var(--radius-sm);
background: var(--gradient-brand);
color: var(--color-brand-800);
font-family: var(--font-mono); font-weight: 700; font-size: 13px;
letter-spacing: 0.2px;
text-decoration: none;
flex-shrink: 0;
}
.brand-mark--lg { width: 32px; height: 32px; font-size: 14px; }
.brand-mark--sm { width: 24px; height: 24px; font-size: 11px; }
/* ============================================================
Avatar — represents a PERSON.
Circular (--radius-pill), soft --bg-overlay-brand fill,
--text-brand initials in mono 700 with a hairline subtle
border. Sizes: 24 / 28 / 30 / 32 — matching the four
production sites (.pc-avatar 30, .pc-user-avatar 32,
row 24, header chip 32). Variants: --ringed (against canvas)
and --badge[data-count] (notification count).
NOTE: The solid --gradient-brand fill + --color-brand-800
initials treatment is RESERVED for Cooper-the-AI surfaces
(.cooper-mark, .brand-mark). Person avatars must use the
soft circular recipe below — gradient-blue reads as
"Cooper is speaking" everywhere else.
============================================================ */
.avatar {
display: inline-grid; place-items: center;
width: 30px; height: 30px;
border-radius: var(--radius-pill);
background: var(--bg-overlay-brand);
color: var(--text-brand);
font-family: var(--font-mono); font-weight: 700; font-size: 12px;
letter-spacing: 0.5px;
border: 1px solid var(--border-subtle);
flex-shrink: 0;
position: relative;
}
.avatar--24 { width: 24px; height: 24px; font-size: 10px; }
.avatar--28 { width: 28px; height: 28px; font-size: 11px; }
.avatar--30 { width: 30px; height: 30px; font-size: 12px; }
.avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.avatar--ringed { box-shadow: var(--ring-avatar); }
.avatar--badge[data-count]::after {
content: attr(data-count);
position: absolute; top: -4px; right: -6px;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: var(--radius-pill);
background: var(--color-error-500);
color: var(--color-neutral-0);
font-family: var(--font-mono); font-weight: 700; font-size: 9px;
display: grid; place-items: center; line-height: 1;
border: 2px solid var(--bg-canvas);
}
/* ============================================================
Cooper mark — represents COOPER (the AI) speaking.
Same gradient-square form as .brand-mark, plus a brand-300
ring offset by --ring-cooper-offset. The ring distinguishes
"Cooper is speaking" from "this is the Cooper logo". When
.cooper-mark--live is set, the ring runs the --gradient-pulse
sweep — used while Cooper is generating analysis, recs, or
strategy output.
============================================================ */
.cooper-mark {
display: inline-grid; place-items: center;
width: 28px; height: 28px;
border-radius: var(--radius-sm);
background: var(--gradient-brand);
color: var(--color-brand-800);
font-family: var(--font-mono); font-weight: 700; font-size: 13px;
letter-spacing: 0.2px;
flex-shrink: 0;
position: relative;
/* Idle ring — solid brand-300, offset out from the mark */
box-shadow: 0 0 0 var(--ring-cooper-offset) var(--bg-canvas),
0 0 0 calc(var(--ring-cooper-offset) + 2px) var(--color-brand-300);
}
.cooper-mark--lg { width: 32px; height: 32px; font-size: 14px; }
.cooper-mark--sm { width: 24px; height: 24px; font-size: 11px; }
/* Live state — animated pulse ring, used while Cooper is
actively generating output (analysis, recommendations, etc).
Reuses --gradient-pulse from the listening-state vocabulary. */
.cooper-mark--live::before {
content: "";
position: absolute;
inset: calc(var(--ring-cooper-offset) * -1 - 2px);
border-radius: calc(var(--radius-sm) + 2px);
padding: 2px;
background: var(--gradient-pulse);
background-size: 200% 100%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: cooper-pulse 1.8s linear infinite;
pointer-events: none;
}
.cooper-mark--live {
/* Hide the static ring while the live ring is animating */
box-shadow: 0 0 0 var(--ring-cooper-offset) var(--bg-canvas);
}
@keyframes cooper-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.cooper-mark--live::before { animation: none; }
}
/* ============================================================
Brand identity — auto-render via tokens.
Use these to render the configured brand without hardcoding
the literal "Cooper" / "C" string in markup.
→ "C"
→ "Cooper"
→ "AI Consultant"
The CSS path below is the no-JS fallback. The runtime helper
in shared/brand.js writes to textContent so the mark/name also
appears for screen readers and inside copy-to-clipboard.
============================================================ */
[data-brand="mark"]:empty::before { content: var(--brand-mark); }
[data-brand="name"]:empty::before { content: var(--brand-name); }
[data-brand="sub"]:empty::before { content: var(--brand-sub); }
[data-brand="product"]:empty::before { content: var(--brand-product); }
body {
font-family: var(--font-sans);
background: var(--bg-canvas);
color: var(--text-tertiary);
-webkit-font-smoothing: antialiased;
}