/* ============================================================================= Enactive — brand tokens enactive.dev · v1.0 · 2026-09 Single source of truth for colour, type and geometry. Import once, then reference only var(--*) — never raw hex. ============================================================================= */ :root { /* --- Ink: the environment the work happens in ---------------------------- */ --ink-950: #0A0B0D; /* app background, deepest surface */ --ink-900: #101216; /* page background */ --ink-800: #171A20; /* panel */ --ink-700: #21252E; /* card, raised surface */ --ink-600: #2E3440; /* border, divider */ --ink-500: #414957; /* strong border, disabled fill */ --ink-400: #5C6575; /* muted text on light, faint text on dark */ --ink-300: #8A93A3; /* secondary text on dark */ --ink-200: #B9C0CC; /* body text on dark (long form) */ --ink-100: #DDE2E9; --ink-50: #F2F4F7; /* primary text on dark */ --bone: #FAF8F5; /* light-mode page background (warm, not pure white) */ --bone-2: #F1EEE9; /* light-mode panel */ /* --- Ember: action. The one colour that means "something happened." ------ */ --ember-50: #FFF3ED; --ember-100: #FFE1D2; --ember-200: #FFC0A4; --ember-300: #FF9C72; /* ember text on dark backgrounds (9.6:1) */ --ember-400: #FF7C48; --ember-500: #FF5F26; /* PRIMARY — the brand colour */ --ember-600: #E84A14; /* pressed / hover-dark */ --ember-700: #BC380F; /* ember text on light backgrounds (5.3:1) */ --ember-800: #8E2B0C; --ember-900: #5C1C08; /* --- Amber: the far end of the heat gradient ----------------------------- */ --amber-300: #FFC85C; --amber-400: #FFB020; /* SECONDARY — gradient partner, autonomy top tier */ --amber-500: #F59E0B; --amber-700: #8A5A06; /* amber text on light */ /* --- Signature gradient -------------------------------------------------- */ --grad-ember: linear-gradient(135deg, var(--ember-500) 0%, var(--amber-400) 100%); --grad-ember-soft: linear-gradient(135deg, rgba(255, 95, 38, 0.16) 0%, rgba(255, 176, 32, 0.10) 100%); /* --- Semantic ------------------------------------------------------------ */ --success: #34D399; --success-on-light: #0B7A55; --warning: #FBBF24; --warning-on-light: #8A5A06; --danger: #FF5D7A; --danger-on-light: #C11D45; --info: #4C8DFF; --info-on-light: #1D4FD8; /* --- Product semantics: autonomy tiers (Observe -> Autonomous) ------------ Escalating warmth. The colour tells the user how much rope the agent has. */ --autonomy-observe: var(--ink-300); --autonomy-suggest: var(--info); --autonomy-execute: var(--ember-500); --autonomy-autonomous: var(--amber-400); /* --- Product semantics: plan step status --------------------------------- */ --step-pending: var(--ink-400); --step-running: var(--info); /* blue, not ember: beside --step-failed, warm reads as a milder red */ --step-done: var(--success); --step-skipped: var(--ink-500); --step-failed: var(--danger); /* --- Roles (workers) — for avatars, filters, timeline chips --------------- */ --role-developer: #4C8DFF; --role-reviewer: #34D399; --role-ops: #A78BFA; --role-writer: #FFB020; /* --- Applied roles (dark is the default theme) --------------------------- */ --bg: var(--ink-900); --bg-elevated: var(--ink-800); --bg-card: var(--ink-700); --border: var(--ink-600); --text: var(--ink-50); --text-muted: var(--ink-300); --text-faint: var(--ink-400); --accent: var(--ember-500); --accent-text: var(--ember-300); --on-accent: #FFFFFF; /* --- Type ---------------------------------------------------------------- */ --font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif; --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace; --track-display: -0.03em; /* headlines and the wordmark */ --track-body: 0; --track-eyebrow: 0.12em; /* uppercase labels */ --step--1: 0.8125rem; /* 13px — captions, chips */ --step-0: 0.9375rem; /* 15px — UI body */ --step-1: 1.0625rem; /* 17px — long-form body */ --step-2: 1.375rem; /* 22px — h3 */ --step-3: 1.875rem; /* 30px — h2 */ --step-4: 2.75rem; /* 44px — h1 */ --step-5: 4rem; /* 64px — hero */ /* --- Geometry ------------------------------------------------------------ */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; /* cards; also the app-icon corner at 64px */ --radius-xl: 20px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45); --glow-ember: 0 0 0 1px rgba(255, 95, 38, 0.35), 0 6px 24px rgba(255, 95, 38, 0.18); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); } /* --- Light theme ---------------------------------------------------------- Warm paper, not white. Ember and the semantics shift to their -on-light variants so text keeps >= 4.5:1. */ :root[data-theme="light"] { --bg: var(--bone); --bg-elevated: var(--bone-2); --bg-card: #FFFFFF; --border: #E2DCD3; --text: var(--ink-900); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --accent: var(--ember-600); --accent-text: var(--ember-700); --on-accent: #FFFFFF; --success: var(--success-on-light); --warning: var(--warning-on-light); --danger: var(--danger-on-light); --info: var(--info-on-light); --shadow-1: 0 1px 2px rgba(28, 20, 12, 0.08); --shadow-2: 0 8px 24px rgba(28, 20, 12, 0.10); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: var(--bone); --bg-elevated: var(--bone-2); --bg-card: #FFFFFF; --border: #E2DCD3; --text: var(--ink-900); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --accent: var(--ember-600); --accent-text: var(--ember-700); --success: var(--success-on-light); --warning: var(--warning-on-light); --danger: var(--danger-on-light); --info: var(--info-on-light); } }