/* * Chiron — Lumina Clarity design tokens * * Source of truth for the Chiron visual identity. Adapted from * the Stitch "Lumina Clarity" design system with Chiron-specific * extensions for agents, project phases, IFC element types, and * compliance status. See /design-system/design.md for usage. * * Naming: --surface-{role}, --text-{role}, --border-{role}, * --agent-{status}, --phase-{code}, --ifc-{type}, * --compliance-{status}. */ :root { color-scheme: light; /* --------------------------------------------------------------- * 1. Surface scale (Lumina Clarity "Light & Airy") * --------------------------------------------------------------- */ --surface-canvas: #FFFFFF; /* Level 0 — main canvas */ --surface-base: #F7F9FB; /* Level 0.5 — page bg */ --surface-subtle: #F1F5F9; /* Level 1 — sidebar, secondary */ --surface-container: #ECEFF1; --surface-raised: #FFFFFF; /* Level 2 — cards, popovers */ /* --------------------------------------------------------------- * 2. Text scale * --------------------------------------------------------------- */ --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #64748B; --text-disabled: #94A3B8; --text-inverse: #FFFFFF; /* --------------------------------------------------------------- * 3. Border scale * --------------------------------------------------------------- */ --border-subtle: #E2E8F0; --border-default: #CBD5E1; --border-strong: #94A3B8; --border-focus: #007BFF; /* --------------------------------------------------------------- * 4. Brand — Lumina Clarity primary blue * --------------------------------------------------------------- */ --brand-primary: #007BFF; /* Vibrant signal blue */ --brand-primary-hover: #005BC0; --brand-primary-active: #004493; --brand-primary-soft: #D8E2FF; /* 10% tint for chips */ --brand-on-primary: #FFFFFF; /* --------------------------------------------------------------- * 5. Semantic status * --------------------------------------------------------------- */ --status-success: #20C997; /* Lumina secondary teal */ --status-success-soft: #D1FADF; --status-success-text: #065F46; --status-warning: #F59E0B; --status-warning-soft: #FEF3C7; --status-warning-text: #92400E; --status-danger: #DC2626; --status-danger-soft: #FEE2E2; --status-danger-text: #991B1B; --status-info: #3B82F6; --status-info-soft: #DBEAFE; --status-info-text: #1E40AF; --status-neutral: #64748B; --status-neutral-soft: #F1F5F9; --status-neutral-text: #334155; /* --------------------------------------------------------------- * 6. Chiron agent status (mapped to semantic) * --------------------------------------------------------------- */ --agent-idle: var(--status-neutral); --agent-idle-soft: var(--status-neutral-soft); --agent-idle-text: var(--status-neutral-text); --agent-running: var(--brand-primary); --agent-running-soft: var(--brand-primary-soft); --agent-running-text: #003082; --agent-blocked: var(--status-warning); --agent-blocked-soft: var(--status-warning-soft); --agent-blocked-text: var(--status-warning-text); --agent-done: var(--status-success); --agent-done-soft: var(--status-success-soft); --agent-done-text: var(--status-success-text); --agent-error: var(--status-danger); --agent-error-soft: var(--status-danger-soft); --agent-error-text: var(--status-danger-text); /* --------------------------------------------------------------- * 7. Chiron project phase (M1–M5 BEAst) + M0 hold * --------------------------------------------------------------- */ --phase-m0: #94A3B8; /* Hold / decomposition */ --phase-m0-soft: #F1F5F9; --phase-m0-text: #334155; --phase-m1: #3B82F6; /* Programhandling — info blue */ --phase-m1-soft: #DBEAFE; --phase-m1-text: #1E40AF; --phase-m2: #8B5CF6; /* Systemhandling — violet */ --phase-m2-soft: #EDE9FE; --phase-m2-text: #5B21B6; --phase-m3: #007BFF; /* Bygghandling — primary blue */ --phase-m3-soft: #D8E2FF; --phase-m3-text: #003082; --phase-m4: #F59E0B; /* Produktionshandling — amber */ --phase-m4-soft: #FEF3C7; --phase-m4-text: #92400E; --phase-m5: #20C997; /* Relationshandling — teal */ --phase-m5-soft: #D1FADF; --phase-m5-text: #065F46; /* --------------------------------------------------------------- * 8. Chiron compliance status (Nomos agent) * --------------------------------------------------------------- */ --compliance-pass: var(--status-success); --compliance-pass-soft: var(--status-success-soft); --compliance-pass-text: var(--status-success-text); --compliance-warn: var(--status-warning); --compliance-warn-soft: var(--status-warning-soft); --compliance-warn-text: var(--status-warning-text); --compliance-fail: var(--status-danger); --compliance-fail-soft: var(--status-danger-soft); --compliance-fail-text: var(--status-danger-text); --compliance-pending: var(--status-neutral); --compliance-pending-soft: var(--status-neutral-soft); --compliance-pending-text: var(--status-neutral-text); /* --------------------------------------------------------------- * 8b. Primary-agent identity palette (live dashboard) * * The 10 always-present agents each get a distinct primary + dark * "hat" color. Same convention as specialist agents: the * differentiation between agents is the point. These are * independent of brand and phase tokens. * --------------------------------------------------------------- */ --agent-pm: #226871; /* Metis - primary brand-aligned (was old teal accent) */ --agent-pm-hat: #122A2D; --agent-client: #2F6F9F; /* Hermes - royal blue */ --agent-client-hat: #1E4969; --agent-parser: #9B59B6; /* Cadmus - purple (input) */ --agent-parser-hat: #6C3483; --agent-brief: #1ABC9C; /* Calliope - teal (RFP) */ --agent-brief-hat: #148F77; --agent-compliance: #E74C3C; /* Nomos - red (compliance) */ --agent-compliance-hat: #922B21; --agent-architect: #3498DB; /* Daedalus - sky blue (architect) */ --agent-architect-hat: #1A5276; --agent-structural: #95A5A6; /* Atlas - slate (structural) */ --agent-structural-hat: #616A6B; --agent-mep: #E67E22; /* Hephaestus - orange (MEP) */ --agent-mep-hat: #935116; --agent-ifc: #2ECC71; /* Pygmalion - green (IFC) */ --agent-ifc-hat: #1D8348; --agent-qa: #C0392B; /* Themis - dark red (QA) */ --agent-qa-hat: #7B241C; /* --------------------------------------------------------------- * 9a. Specialist-agent identity palette (Pygmalion dashboard) * * Each specialist agent gets a distinct primary + dark "hat" color * so the user can tell agents apart on the dashboard. The "hat" is * a darker variant of the primary. Do not collapse these into * brand tokens — the differentiation IS the value. * --------------------------------------------------------------- */ --agent-id-acoustics: #6F7DBE; --agent-id-acoustics-hat: #39427A; --agent-id-security: #3C6E71; --agent-id-security-hat: #244244; --agent-id-medical_gases: #2F80A0; --agent-id-medical_gases-hat:#1D5268; --agent-id-fire_sprinkler: #B75042; --agent-id-fire_sprinkler-hat:#7A2C25; --agent-id-ventilation: #5B8FA8; --agent-id-ventilation-hat: #315B6E; --agent-id-electrical: #D8A23A; --agent-id-electrical-hat: #8A651F; --agent-id-plumbing: #4F8F67; --agent-id-plumbing-hat: #2D5A3E; --agent-id-landscape: #6A994E; --agent-id-landscape-hat: #386641; --agent-id-site_utility: #46545C; --agent-id-site_utility-hat: #2C3841; /* --------------------------------------------------------------- * 9. IFC element types (Pygmalion) — semantic groupings * --------------------------------------------------------------- */ --ifc-space: #3B82F6; /* IfcSpace — rooms */ --ifc-wall: #475569; /* IfcWall */ --ifc-slab: #64748B; /* IfcSlab */ --ifc-door: #8B5CF6; /* IfcDoor */ --ifc-window: #06B6D4; /* IfcWindow */ --ifc-beam: #92400E; /* IfcBeam */ --ifc-column: #B45309; /* IfcColumn */ --ifc-duct: #0EA5E9; /* MEP duct */ --ifc-pipe: #0891B2; /* MEP pipe */ --ifc-cable: #F59E0B; /* Electrical */ --ifc-equipment: #EC4899; /* Equipment, fixtures */ /* --------------------------------------------------------------- * 10. Radius (Lumina Clarity: rounded) * --------------------------------------------------------------- */ --radius-xs: 0.25rem; /* 4px — chips, small */ --radius-sm: 0.5rem; /* 8px — buttons, inputs, small cards */ --radius-md: 0.75rem; /* 12px — medium cards */ --radius-lg: 1rem; /* 16px — large containers */ --radius-xl: 1.5rem; /* 24px — hero blocks */ --radius-full: 9999px; /* pills, avatars */ /* --------------------------------------------------------------- * 11. Spacing (8px base) * --------------------------------------------------------------- */ --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; /* --------------------------------------------------------------- * 12. Shadow (Lumina Clarity: only one ambient) * --------------------------------------------------------------- */ --shadow-ambient: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.04); --shadow-focus: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--brand-primary-soft); /* --------------------------------------------------------------- * 13. Typography (Hanken Grotesk + JetBrains Mono) * --------------------------------------------------------------- */ --font-sans: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --text-display: 3rem; /* 48px / 56 — hero */ --text-headline-lg: 2rem; /* 32px / 40 — section title */ --text-headline-md: 1.5rem; /* 24px / 32 — card title */ --text-headline-sm: 1.25rem; /* 20px / 28 */ --text-body-lg: 1.125rem; /* 18px / 28 */ --text-body-md: 1rem; /* 16px / 24 */ --text-body-sm: 0.875rem; /* 14px / 20 */ --text-label: 0.875rem; /* 14px mono */ --text-caption: 0.75rem; /* 12px mono */ --text-micro: 0.6875rem; /* 11px mono */ /* --------------------------------------------------------------- * 14. Layout * --------------------------------------------------------------- */ --max-width: 1280px; --nav-height: 64px; --sidebar-width: 240px; --sidebar-width-collapsed: 64px; /* --------------------------------------------------------------- * 15. Legacy aliases (pre-2026-06 website code) * * Older website pages (website/index.html, compendium.html, etc.) * were written against the previous teal/lime palette and use * token names like --bg, --gold, --text-dim. Re-bind those names * to the Lumina Clarity values so legacy CSS keeps working with * correct contrast — no page rewrites required. * --------------------------------------------------------------- */ --bg: var(--surface-base); --bg-2: var(--surface-canvas); --bg-3: var(--surface-subtle); --text: var(--text-primary); --text-muted: var(--text-secondary); --text-dim: var(--text-secondary); --border: var(--border-subtle); --border-hover: var(--border-default); --border-strong: var(--border-default); --accent: var(--brand-primary); --accent-dim: var(--brand-primary-soft); --accent-glow: var(--brand-primary-soft); --accent-border: var(--border-default); --brand-secondary: var(--brand-primary-hover); --brand-lime: var(--brand-primary); --brand-dark: var(--text-primary); --gold: var(--brand-primary); --gold-dim: var(--brand-primary-soft); --gold-glow: var(--brand-primary-soft); --gold-border: var(--border-default); --success: var(--status-success); --success-dim: var(--status-success-soft); --warning: var(--status-warning); --warning-dim: var(--status-warning-soft); --danger: var(--status-danger); --danger-dim: var(--status-danger-soft); --info: var(--status-info); --info-dim: var(--status-info-soft); --surface-canvas-legacy: var(--surface-canvas); } /* --------------------------------------------------------------- * Dark mode (data-theme="dark") * --------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --surface-canvas: #0F172A; --surface-base: #0B1220; --surface-subtle: #1E293B; --surface-container: #243349; --surface-raised: #1E293B; --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-disabled: #475569; --text-inverse: #0F172A; --border-subtle: #1E293B; --border-default: #334155; --border-strong: #475569; --brand-primary-soft: #1E3A8A; --shadow-ambient: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --json-preview-bg: #020617; --json-preview-fg: #E2E8F0; }