/* ======================================================== THEME — DEFAULT (Anthropic-style) ======================================================== Mirror of the inline :root block in index.html (lines 16–55) and ai-chat.html (lines 16–55). Phase 1 of the split: greenfield scaffolding only — the inline tokens in the HTML files remain authoritative; this file is the canonical reference for future audience variants (themes//). Phase 2 will tokenize the DESIGN_TOKENS.md punch-list of hardcoded values (#c4521a, #142132, #EA580C, etc.) and migrate templates to read from this file instead of the inline block. ┌──────────────────────────────────────────────────────────────────┐ │ ⚠ EDITOR COVERAGE — when ADDING a new token below, also patch: │ │ 1. editor/components.js → assign to a relevant GROUPS entry │ │ (so it surfaces in the Components Workbench + Active panel │ │ click-routing + hover-highlight) │ │ 2. editor/gallery.js → add a swatch in the matching │ │ SECTIONS entry (so it appears in the visual gallery) │ │ 3. editor/ai-prompt.js → add to │ │ DEPTH_TIERS.visual.tokenAllowList if audience-themable │ │ (Light tier is brand-only by design; Full + Custom │ │ expose all tokens automatically) │ │ │ │ Tokens are auto-discovered by parseTokensFromCss → editable via │ │ Single Prompt / JSON paste / Save without these patches, but the │ │ Workbench / gallery / Visual-tier UX requires manual curation. │ │ │ │ scripts/lint-themability.sh emits a warning for uncovered tokens.│ │ See MAINTENANCE.md "Coverage status" + editor module table. │ └──────────────────────────────────────────────────────────────────┘ Last sync: 2026-04-25 (Phase 1 split — greenfield). ======================================================== */ :root { /* Brand */ --brand-primary: #E87040; --brand-primary-hover: #d4613a; --ui-brand-primary: #E87040; --ui-brand-primary-hover: #d4613a; --ui-brand-ink: #0f172a; --ui-brand-soft: #fef0e8; --ui-border: rgba(15, 23, 42, 0.08); --ui-border-strong: rgba(15, 23, 42, 0.14); --ui-border-soft: #e2e8f0; --ui-border-stronger: #cbd5e1; --ui-surface: #ffffff; --ui-surface-subtle: #f8fafc; --ui-muted: #64748b; --dark-bg: #0F0F0F; --light-bg: #F8F6F2; /* Severity */ --severity-critical-text: #991b1b; --severity-critical-bg: #fee2e2; --severity-high-text: #92400e; --severity-high-bg: #fef3c7; --severity-medium-text: #854d0e; --severity-medium-bg: #fef9c3; --severity-low-text: #065f46; --severity-low-bg: #d1fae5; /* Issue types */ --issue-shared: #7C3AED; --issue-human-only: #EC4899; --issue-agent-only: #3B82F6; /* Sim depth accent (Build Window 5) — Screen 3 sim-depth section header parity with human (--brand-primary) + agent (--issue-agent-only). Slate keeps "configuration" semantics calm and avoids clashing with either persona accent. */ --depth-accent: #64748B; /* Typography */ --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-polish: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; /* === Phase 2A Group 1: tokens for upcoming punch-list (DESIGN_TOKENS.md) === */ /* Brand variants (per §20 Screen 6a/7 follow-ups) */ --brand-primary-deep: #c4521a; --brand-primary-light: #F5956B; --brand-primary-tint: rgba(232, 112, 64, 0.28); --focus-ring-brand: rgba(232, 112, 64, 0.08); --glow-brand-soft: rgba(232, 112, 64, 0.06); --glow-brand-medium: rgba(232, 112, 64, 0.10); --glow-brand-faint: rgba(232, 112, 64, 0.15); --glow-brand-04: rgba(232, 112, 64, 0.04); --glow-brand-05: rgba(232, 112, 64, 0.05); --glow-brand-12: rgba(232, 112, 64, 0.12); --glow-brand-14: rgba(232, 112, 64, 0.14); --glow-brand-16: rgba(232, 112, 64, 0.16); --glow-brand-18: rgba(232, 112, 64, 0.18); --glow-brand-20: rgba(232, 112, 64, 0.2); --glow-brand-25: rgba(232, 112, 64, 0.25); --glow-brand-30: rgba(232, 112, 64, 0.3); --glow-brand-35: rgba(232, 112, 64, 0.35); --glow-brand-36: rgba(232, 112, 64, 0.36); --glow-brand-38: rgba(232, 112, 64, 0.38); --glow-brand-40: rgba(232, 112, 64, 0.4); --glow-brand-42: rgba(232, 112, 64, 0.42); --glow-brand-45: rgba(232, 112, 64, 0.45); --glow-brand-50: rgba(232, 112, 64, 0.5); --glow-brand-60: rgba(232, 112, 64, 0.6); --glow-brand-70: rgba(232, 112, 64, 0.7); --brand-primary-strong: rgba(232, 112, 64, 0.8); /* Text scale extension (6-tier) */ --ui-text-primary: #1c1c1b; --ui-text-strong: #142132; --ui-text-emphasis-2: #334155; --ui-text-emphasis: #475569; --ui-text-tertiary: #94a3b8; /* slate-400; used for placeholders, hint text, muted-2 */ --ui-text-inverse: #ffffff; /* text on dark/saturated surfaces (success accent, brand-ink CTAs) */ /* C2 paper-tone palette (Screen 8 only — warm-cream variant of the live theme). Decoupled from --ui-surface* so audience theming on the rest of the app stays cool/slate while S8 reads as paper-and-ink editorial. */ --paper-bg: #f7f3ec; --paper-raise: #fffdf8; --paper-ink: #1a1816; --paper-ink-dim: #5a544a; --paper-ink-mute: #8c857a; --paper-rule: #e3ddcf; --paper-rule-soft: #ece6d6; --paper-accent: #d97757; /* Anthropic orange — pill / save / open-glyph */ --paper-accent-deep: #c25a3a; --paper-accent-soft: rgba(217,119,87,0.10); --paper-accent-halo-1: rgba(217,119,87,0.35); --paper-accent-halo-2: rgba(217,119,87,0.22); --paper-accent-halo-3: rgba(217,119,87,0.55); --paper-accent-halo-4: rgba(217,119,87,0.38); --paper-green: #3a8068; /* forest-green success */ --paper-green-soft: rgba(58,128,104,0.06); --paper-green-tint: rgba(58,128,104,0.12); --paper-row-hover: rgba(26,24,22,0.025); --paper-shadow-card: 0 1px 0 rgba(26,24,22,0.03), 0 8px 22px -18px rgba(26,24,22,0.16); --paper-ease-collapse: cubic-bezier(0.32, 0.72, 0, 1); --splash-screen-bg: radial-gradient(circle at top, rgba(254,237,224,0.72), rgba(250,250,250,0) 22%), var(--light-bg); /* Persona accents */ --persona-yuki: #EA580C; --persona-hassan: #86EFAC; --persona-kai: #64748B; --persona-ben: #0EA5E9; /* Agent palette */ --agent-accent-green: #10B981; --agent-accent-blue: #3B82F6; --agent-accent-cyan: #06B6D4; /* Shadow ladder */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10); --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.12); --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.18); --shadow-floating: 0 12px 40px rgba(0, 0, 0, 0.4); --shadow-overlay-pill: 0 1px 4px rgba(0, 0, 0, 0.32); /* Disclosure-badge overlay (R1 reconstructed surfaces, etc.). Dark glassy pill that floats over content to indicate AI-synthesized surfaces. bg uses ui-brand-ink hue at 78% alpha so it themes with the ink palette; fg matches ui-surface-subtle for high-contrast on the overlay. Kept distinct from --ui-* tokens so theme variants can swap just the badge chrome without touching surface colors. */ --badge-overlay-bg: rgba(15, 23, 42, 0.78); --badge-overlay-fg: #f8fafc; /* Success / accept state */ --state-success-bg: #dcfce7; --state-success-bg-soft: #f0fdf4; --state-success-text: #166534; --state-success-accent: #16a34a; --state-success-accent-soft: #22c55e; --state-success-border-soft: rgba(34, 197, 94, 0.18); --state-rejected-bg: #fef2f2; --state-rejected-text: #991b1b; /* Partial / warning */ --state-partial-bg-stop1: #fcd34d; --state-partial-bg-stop2: #fbbf24; --state-partial-accent: #f59e0b; /* Issue-class tints (Change 5/6) */ --class-friction-soft: rgba(124,58,237,0.04); --class-friction-border: rgba(124,58,237,0.18); --class-friction-accent: #7c3aed; --class-ai-failure-soft: rgba(239,68,68,0.04); --class-ai-failure-border: rgba(239,68,68,0.18); /* Code diff */ --code-diff-add: #7EC699; --code-diff-rm: #f87171; --trace-after-head: #4ade80; --trace-failed-cmd: #fca5a5; /* Misc */ --ease-screen-transition: cubic-bezier(0.2, 0, 0.08, 1); --persona-glow-default: rgba(245, 158, 11, 0.35); --agent-node-border: rgba(148, 163, 184, 0.2); --ui-button-secondary-bg: rgba(148, 163, 184, 0.2); /* === Phase 2C.1 Group 1: border radius + animation tokens === */ /* Border radii — promoted from DESIGN_TOKENS §10 (was "enforced by convention") */ --radius-card: 8px; --radius-card-soft: 18px; --radius-input: 12px; --radius-pill: 999px; --radius-button: 8px; --radius-darkPrimaryButton: 10px; --radius-darkPrimaryButton-large: 16px; --radius-codeBlock: 8px; --radius-input-hero: 20px; /* prominent URL/hero inputs; see DESIGN_TOKENS §10 */ --radius-tag: 4px; /* inline tags / micro-badges (e.g. /simulate_ URL badge) */ /* Animation / transition durations — promoted from DESIGN_TOKENS §11 */ /* --transition-fast (150ms ease) and --transition-normal (300ms ease) declared above */ --transition-list-row-hover: 120ms ease; --transition-screen: 200ms cubic-bezier(0.2, 0, 0.08, 1); --transition-screen-dark-light: 300ms cubic-bezier(0.2, 0, 0.08, 1); --cursor-blink-duration: 1060ms step-end; --proceed-pulse-delay-ms: 5000; /* JS-side const; exposed here for editor Motion group */ --proceed-gate-timeout-ms: 60000; /* JS-side const; exposed here for editor Motion group */ /* C5 splash morph (2026-05-04 redesign §2.4) */ --ease-splash-morph: cubic-bezier(0.32, 0.72, 0, 1); --transition-splash-pill: 540ms cubic-bezier(0.32, 0.72, 0, 1); --transition-splash-pad: 420ms cubic-bezier(0.32, 0.72, 0, 1); --transition-splash-bg: 320ms ease; --transition-splash-wash: 520ms ease; --transition-splash-fadein: 280ms ease; --transition-splash-fadeout: 200ms ease; --transition-splash-fadein-delay: 220ms; --splash-thesis-wash-opacity: 0.22; --splash-thesis-wash-saturate: 0.15; /* Splash on-dark surface tokens (light-on-dark chrome for the C5 splash) */ --splash-text-primary: #ffffff; --splash-text-secondary: rgba(255,255,255,0.85); --splash-text-claim: rgba(255,255,255,0.55); --splash-text-replay: rgba(255,255,255,0.4); --splash-text-replay-hover: rgba(255,255,255,0.75); --splash-pill-idle-bg: rgba(255,255,255,0.04); --splash-pill-idle-bg-hover: rgba(255,255,255,0.08); --splash-pill-idle-border: rgba(255,255,255,0.25); --splash-pill-idle-border-hover: rgba(255,255,255,0.4); --splash-pill-input-bg: rgba(255,255,255,0.92); --splash-pill-input-shadow: 0 2px 8px rgba(15,23,42,0.04); --splash-pill-submit-shadow: 0 4px 12px rgba(15,23,42,0.12); --splash-pill-submit-hover-bg: #111827; /* === Phase 2C.2: spacing scale (8px-base grid; promoted from DESIGN_TOKENS §9) === */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; /* === Phase 2D #2: code-block syntax colors === */ /* Distinct from --ui-muted / --code-diff-* despite value overlap, so theme variants can recolor code-block syntax independently of UI text and diff highlights. */ --syntax-attr: #93c5fd; --syntax-string: #86efac; --syntax-comment: #64748b; /* === Phase 2C.3: type scale (6 steps × 3 properties; promoted from DESIGN_TOKENS §8) === */ /* Round 3 (2026-05-05): added --text-displayHero-* (7th step) for the splash thesis line; size is fluid 24→34px via clamp at the use site. */ --text-displayHero-size: 34px; --text-displayHero-weight: 500; --text-displayHero-lh: 1.2; --text-pageHeading-size: 20px; --text-pageHeading-weight: 600; --text-pageHeading-lh: 28px; --text-sectionHeading-size: 16px; --text-sectionHeading-weight: 600; --text-sectionHeading-lh: 24px; --text-body-size: 14px; --text-body-weight: 400; --text-body-lh: 22px; --text-label-size: 12px; --text-label-weight: 600; --text-label-lh: 18px; --text-smallHelper-size: 11px; --text-smallHelper-weight: 400; --text-smallHelper-lh: 16px; --text-codeMono-size: 13px; --text-codeMono-weight: 400; --text-codeMono-lh: 20px; }