/* ──────────────────────────────────────────────────────────────────────── * wakalix — domain token layer * Extends AimpathyMinds base-tokens.css. Adds: switchable brand accent, * the six status-token color slots, agent-tier scale, phase scale. * Load AFTER base-tokens.css. * ──────────────────────────────────────────────────────────────────────── */ /* ── Switchable accent ────────────────────────────────────────────────── * One hue+chroma pair drives the whole accent ramp via oklch(). Flip the * [data-accent] attribute on to audition a direction live. */ html { --acc-h: 215; --acc-c: 0.125; } /* default: deep cyan */ html[data-accent="teal"] { --acc-h: 200; --acc-c: 0.11; } html[data-accent="cyan"] { --acc-h: 215; --acc-c: 0.125; } html[data-accent="indigo"] { --acc-h: 272; --acc-c: 0.15; } html[data-accent="bluegreen"] { --acc-h: 178; --acc-c: 0.105; } /* Light-theme accent ramp derived from the hue/chroma pair */ html { --accent: oklch(0.52 var(--acc-c) var(--acc-h)); --accent-strong: oklch(0.42 calc(var(--acc-c) + 0.02) var(--acc-h)); --accent-hover: oklch(0.46 calc(var(--acc-c) + 0.02) var(--acc-h)); --accent-soft: oklch(0.92 calc(var(--acc-c) * 0.45) var(--acc-h)); --accent-softer: oklch(0.96 calc(var(--acc-c) * 0.22) var(--acc-h)); --accent-tint: oklch(0.88 calc(var(--acc-c) * 0.55) var(--acc-h)); --accent-fg: oklch(0.995 0 0); --accent-border: oklch(0.70 calc(var(--acc-c) * 0.9) var(--acc-h)); --border-focus: oklch(0.52 calc(var(--acc-c) + 0.005) var(--acc-h)); --ring-accent: 0 0 0 3px oklch(0.52 var(--acc-c) var(--acc-h) / 0.18); } /* Dark-theme accent ramp */ html[data-theme="dark"] { --accent: oklch(0.74 var(--acc-c) var(--acc-h)); --accent-strong: oklch(0.84 calc(var(--acc-c) + 0.01) var(--acc-h)); --accent-hover: oklch(0.82 var(--acc-c) var(--acc-h)); --accent-soft: oklch(0.30 calc(var(--acc-c) * 0.7) var(--acc-h)); --accent-softer: oklch(0.24 calc(var(--acc-c) * 0.5) var(--acc-h)); --accent-tint: oklch(0.36 calc(var(--acc-c) * 0.9) var(--acc-h)); --accent-fg: oklch(0.10 0.015 230); --accent-border: oklch(0.50 var(--acc-c) var(--acc-h)); --border-focus: oklch(0.72 var(--acc-c) var(--acc-h)); --ring-accent: 0 0 0 3px oklch(0.74 var(--acc-c) var(--acc-h) / 0.25); } /* Re-tint the app glow to the active accent */ .am { background-image: radial-gradient(ellipse at 30% 0%, oklch(0.52 var(--acc-c) var(--acc-h) / 0.04), transparent 60%); } [data-theme="dark"] .am { background-image: radial-gradient(ellipse at 30% 0%, oklch(0.55 var(--acc-c) var(--acc-h) / 0.10), transparent 60%); } /* ── Status-token color slots (§3.1, the six) ─────────────────────────── * Each token maps to exactly one semantic slot. WIP rides the live accent. */ html { --tok-draft: var(--fg-3); --tok-draft-soft: var(--bg-sunken); --tok-ready: var(--info); --tok-ready-soft: var(--info-soft); --tok-wip: var(--accent); --tok-wip-soft: var(--accent-soft); --tok-blocked: var(--warn); --tok-blocked-soft: var(--warn-soft); --tok-done: var(--ok); --tok-done-soft: var(--ok-soft); --tok-vetoed: var(--bad); --tok-vetoed-soft: var(--bad-soft); } /* ── Agent-tier scale ─────────────────────────────────────────────────── * A violet→slate hierarchy, deliberately OUTSIDE the semantic status hues so * tier never reads as state. portfolio = rarest/most saturated. */ html { --tier-portfolio: oklch(0.52 0.15 300); --tier-portfolio-soft: oklch(0.94 0.045 300); --tier-product: oklch(0.55 0.12 282); --tier-product-soft: oklch(0.94 0.038 282); --tier-developer: oklch(0.58 0.095 262); --tier-developer-soft: oklch(0.94 0.03 262); --tier-helper: oklch(0.60 0.02 270); --tier-helper-soft: oklch(0.95 0.008 270); } html[data-theme="dark"] { --tier-portfolio: oklch(0.74 0.15 300); --tier-portfolio-soft: oklch(0.30 0.08 300); --tier-product: oklch(0.76 0.12 282); --tier-product-soft: oklch(0.29 0.06 282); --tier-developer: oklch(0.78 0.095 262); --tier-developer-soft: oklch(0.28 0.05 262); --tier-helper: oklch(0.72 0.02 270); --tier-helper-soft: oklch(0.27 0.012 270); } /* ── Phase scale (A planning · B execution · C close) ──────────────────── * Reuses semantic hues to keep the palette tight. */ html { --phase-a: var(--info); --phase-b: var(--accent); --phase-c: var(--ok); } /* ════════════════════════════════════════════════════════════════════════ * Domain component classes * ════════════════════════════════════════════════════════════════════════ */ /* StatusToken — bracketed monospace, color-slotted */ .am .wx-tok { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 6px; border-radius: var(--r-1); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; border: var(--hairline) solid transparent; white-space: nowrap; } .am .wx-tok .tok-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .am .wx-tok[data-tok="DRAFT"] { color: var(--fg-2); background: var(--bg-sunken); border-color: var(--border-1); } .am .wx-tok[data-tok="READY"] { color: var(--info); background: var(--info-soft); } .am .wx-tok[data-tok="WIP"] { color: var(--accent-strong); background: var(--accent-soft); } .am .wx-tok[data-tok="BLOCKED"] { color: var(--warn); background: var(--warn-soft); } .am .wx-tok[data-tok="DONE"] { color: var(--ok); background: var(--ok-soft); } /* VETOED is loud by design — filled, not tinted */ .am .wx-tok[data-tok="VETOED"] { color: oklch(0.99 0 0); background: var(--bad); border-color: oklch(from var(--bad) calc(l - 0.1) c h); box-shadow: 0 1px 2px oklch(from var(--bad) calc(l - 0.2) c h / 0.4); } [data-theme="dark"] .am .wx-tok[data-tok="VETOED"] { color: oklch(0.14 0.02 25); } [data-theme="dark"] .am .wx-tok[data-tok="WIP"] { color: var(--accent-strong); } /* Tier stripe + chip */ .am .tier-stripe { width: 3px; border-radius: 2px; flex-shrink: 0; align-self: stretch; } .am [data-tier="portfolio"] .tier-stripe, .am .tier-stripe[data-tier="portfolio"] { background: var(--tier-portfolio); } .am [data-tier="product"] .tier-stripe, .am .tier-stripe[data-tier="product"] { background: var(--tier-product); } .am [data-tier="developer"] .tier-stripe, .am .tier-stripe[data-tier="developer"] { background: var(--tier-developer); } .am [data-tier="helper"] .tier-stripe, .am .tier-stripe[data-tier="helper"] { background: var(--tier-helper); } .am .tier-chip { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px 0 6px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; border: var(--hairline) solid transparent; } .am .tier-chip[data-tier="portfolio"] { color: var(--tier-portfolio); background: var(--tier-portfolio-soft); } .am .tier-chip[data-tier="product"] { color: var(--tier-product); background: var(--tier-product-soft); } .am .tier-chip[data-tier="developer"] { color: var(--tier-developer); background: var(--tier-developer-soft); } .am .tier-chip[data-tier="helper"] { color: var(--tier-helper); background: var(--tier-helper-soft); } .am .tier-chip .tc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Phase chip */ .am .phase-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; border: var(--hairline) solid var(--border-2); background: var(--bg-raised); color: var(--fg-2); } .am .phase-chip .ph-glyph { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--accent-fg); } .am .phase-chip[data-phase="A"] .ph-glyph { background: var(--phase-a); } .am .phase-chip[data-phase="B"] .ph-glyph { background: var(--phase-b); } .am .phase-chip[data-phase="C"] .ph-glyph { background: var(--phase-c); } /* WI badge — monospace id chip, click target */ .am .wi-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; padding: 1px 6px; border-radius: var(--r-1); background: var(--bg-sunken); border: var(--hairline) solid var(--border-1); color: var(--fg-2); letter-spacing: 0.01em; cursor: default; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .am .wi-badge:hover { color: var(--accent); border-color: var(--accent-border); } /* Model-tier weight glyph (opus/sonnet/haiku) */ .am .model-glyph { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; } .am .model-glyph i { width: 2.5px; border-radius: 1px; background: var(--fg-4); display: block; } .am .model-glyph i:nth-child(1) { height: 4px; } .am .model-glyph i:nth-child(2) { height: 7px; } .am .model-glyph i:nth-child(3) { height: 11px; } .am .model-glyph[data-model="haiku"] i:nth-child(1) { background: var(--fg-2); } .am .model-glyph[data-model="sonnet"] i:nth-child(1), .am .model-glyph[data-model="sonnet"] i:nth-child(2) { background: var(--fg-2); } .am .model-glyph[data-model="opus"] i { background: var(--accent); } /* Commit trailer chip */ .am .commit-trailer { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-mono); font-size: 11px; border: var(--hairline) solid var(--border-1); border-radius: var(--r-1); overflow: hidden; } .am .commit-trailer span { padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; } .am .commit-trailer .ct-k { background: var(--bg-sunken); color: var(--fg-3); border-right: var(--hairline) solid var(--border-1); } .am .commit-trailer .ct-v { color: var(--fg-1); } /* Governance banner */ .am .gov-banner { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-3); border: var(--hairline) solid transparent; } .am .gov-banner[data-sev="veto"] { background: var(--bad-soft); border-color: oklch(from var(--bad) l c h / 0.4); color: var(--fg-1); } .am .gov-banner[data-sev="block"] { background: var(--warn-soft); border-color: oklch(from var(--warn) l c h / 0.4); color: var(--fg-1); } .am .gov-banner[data-sev="spend"] { background: oklch(from var(--warn) 0.95 0.06 45 / 1); border-color: oklch(0.7 0.13 45 / 0.4); color: var(--fg-1); } [data-theme="dark"] .am .gov-banner[data-sev="spend"] { background: oklch(0.3 0.06 45); } .am .gov-banner .gov-icon { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; } .am .gov-banner[data-sev="veto"] .gov-icon { background: var(--bad); color: oklch(0.99 0 0); } .am .gov-banner[data-sev="block"] .gov-icon { background: var(--warn); color: oklch(0.2 0.05 75); } .am .gov-banner[data-sev="spend"] .gov-icon { background: oklch(0.62 0.16 45); color: oklch(0.99 0 0); } /* Specimen grid helpers (docs only) */ .am .spec-grid { display: grid; gap: 1px; background: var(--border-1); border: var(--hairline) solid var(--border-1); border-radius: var(--r-3); overflow: hidden; } .am .spec-cell { background: var(--bg-base); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .am .spec-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; } .am .spec-note { font-size: 11.5px; color: var(--fg-3); line-height: 1.45; } /* Brand wordmark — force monospace on the word AND any descendants the editor * injects (live-edit wraps text nodes in bare spans that would otherwise catch * the .am * UI-font rule). Specificity (0,2,0) beats .am * (0,1,0). */ .am .wx-word, .am .wx-word * { font-family: var(--font-mono) !important; }