/* Project Infinite — canonical design tokens. Editorial Dark is the platform default. Dark is locked on platform surfaces via data-theme="dark" on . The light values + prefers-color-scheme block are retained for surfaces that opt in. */ :root { /* Dark (default) — roastery-at-night, brand cream on espresso */ --ink-0: #08080B; --ink-1: #0E0E12; --ink-2: #14161B; --ink-3: #1E2028; --line: rgba(255,255,255,0.07); --line-strong: rgba(255,255,255,0.14); --paper: #F5F1E8; --paper-dim: rgba(245,241,232,0.80); --paper-mute: rgba(245,241,232,0.66); --paper-faint: rgba(245,241,232,0.50); --amber: #E8B25A; --amber-bright: #F5C977; --amber-soft: rgba(232,178,90,0.14); --amber-glow: rgba(232,178,90,0.32); --mint: #6BD3A8; --mint-soft: rgba(107,211,168,0.14); --rose: #E58A7A; --rose-soft: rgba(229,138,122,0.14); --violet: #8B5CF6; --violet-soft: rgba(139,92,246,0.16); --sky: #7EB6E8; --sky-soft: rgba(126,182,232,0.14); --hero-tint: radial-gradient(900px 600px at 80% -10%, rgba(232,178,90,0.06), transparent 60%); --t-fast: cubic-bezier(.2,.8,.2,1); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-serif: "Instrument Serif", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* === Action-class CTAs (Brand Guidelines §3.2 · Cluster CTA Accent Doctrine) === Apple system colours. iOS-trained recognition transfers across all 12 clusters. Same hue across multiple clusters when the moment is the same kind of moment. */ --apple-blue: #007AFF; /* iOS Blue · system canonical */ --apple-green: #34C759; /* iOS Green · system canonical */ --apple-orange: #FF9500; /* iOS Orange · system canonical */ --apple-red: #FF3B30; /* iOS Red · system canonical */ --apple-gray: #86868B; /* iOS System Gray 2 */ --btn-care: var(--apple-blue); /* Neutral primary · trust · listening · Continue / Reply / Resolve */ --btn-go: var(--apple-green); /* Affirmative · Approve / Sign / Confirm / Pay */ --btn-persona: var(--apple-orange); /* Persona-side accept · conversion · Buy Now / Bid Now / Subscribe */ --btn-alert: var(--apple-red); /* Destructive · escalation · Cancel / Delete / Emergency */ --btn-neutral: var(--apple-gray); /* Secondary · Skip / Decide later */ /* === Status diagnostic colours (per SR4.4 §4) === Observational indicators ONLY · not for actions · cluster-independent. */ --status-healthy: #34C759; --status-attention: #FF9500; --status-offbalance: #FF3B30; --status-neutral: #86868B; --status-healthy-soft: rgba(52,199,89,0.12); --status-attention-soft: rgba(255,149,0,0.12); --status-offbalance-soft: rgba(255,59,48,0.12); /* === Mobile-First Doctrine v1 (pre-SR5.2 · Step 11) === Token-based breakpoints. iPhone width is the default design target. Use with @media (min-width: var(--bp-*)). */ --bp-xs: 320px; /* iPhone SE · single column */ --bp-sm: 390px; /* iPhone 14/15 · DEFAULT design target */ --bp-md: 744px; /* iPad portrait · two-column appearing */ --bp-lg: 1024px; /* iPad landscape · small laptop · three-column */ --bp-xl: 1440px; /* large laptop · full Wallboard density */ --bp-2xl: 1920px; /* large display · Heartbeat Wallboard hero */ --tap-min: 44px; /* Apple HIG tap target minimum */ --thumb-zone: 100px; /* bottom-thumb-reach for primary CTAs on mobile */ /* === Lifecycle color doctrine (ROYGBIV progression · LOCKED 2026-05-18) === Orthogonal to cluster colors. A Sales-cluster surface (Apple Green chrome) showing a Client record displays the record in Apple Blue lifecycle color. Both layers coexist · contact lifecycle reads at-a-glance · cluster preserved. Warm → cool maps to journey-state: unqualified heat → active motion → settled trust → premium tier. */ --lifecycle-lead: #FF9500; /* Apple Orange · Before unit · warm · attention · early heat */ --lifecycle-prospect: #34C759; /* Apple Green · During unit · alive · growing */ --lifecycle-client: #007AFF; /* Apple Blue · After unit · calm · trusted · established */ --lifecycle-vip: #AF52DE; /* Apple Purple · VIP tier · premium · top of relationship */ --lifecycle-lead-soft: rgba(255,149,0,0.10); --lifecycle-prospect-soft: rgba(52,199,89,0.10); --lifecycle-client-soft: rgba(0,122,255,0.10); --lifecycle-vip-soft: rgba(175,82,222,0.10); /* === Cluster colour tokens · Apple-vibrancy refresh (Brand Guidelines §3) === LOCKED 2026-05-17. Each cluster has identity · deep · surface where defined. Source: Design_Handoff_Brand_Guidelines_v1 §3 table. */ /* Cluster 1 Onboarding · conversion-function exception · NO cluster accent · aliased to --btn-care for back-compat */ --cluster-onboarding: var(--btn-care); --cluster-onboarding-soft: rgba(0,122,255,0.10); --cluster-onboarding-glow: rgba(0,122,255,0.22); --cluster-onboarding-deep: #0051D5; --cluster-core: #5AC8C0; /* 2 · Soft Teal vibrant (refresh from #7CB9B0) */ --cluster-core-deep: #1B4D49; --cluster-core-surface: #EEF7F5; --heartbeat-velvet: #7A1F2E; /* 2 · Heartbeat tile only */ --heartbeat-velvet-warm: #8B2942; --cluster-marketing: #34C759; /* 3 · Apple Green (refresh from #7EB6E8) */ --cluster-marketing-deep: #137A2E; --cluster-marketing-surface: #E6F7EA; --cluster-commerce: #EBC788; /* 4 · Champagne (refresh from #E8B25A) */ --cluster-commerce-deep: #A6803A; --cluster-commerce-surface: #FBF6EA; --cluster-finance: #0E8C5B; /* 5 · Deep Emerald (refresh from #7BC9A0) */ --cluster-finance-deep: #0A6442; --cluster-finance-surface: #D3F0E0; --cluster-procurement: #E15D45; /* 6 · Apple-vibrancy terracotta (refresh from #D67B6A) */ --cluster-procurement-deep: #B14530; --cluster-procurement-surface: #F8E0DA; --cluster-people: #E4738B; /* 7 · Warm rose (refresh from #A89DE8) */ --cluster-people-deep: #A8455A; --cluster-people-surface: #FFE0E7; --cluster-trust: #7C5DCE; /* 8 · Violet (refresh from #8478C2) */ --cluster-trust-deep: #4E3A8E; --cluster-trust-surface: #EEE7FB; --cluster-cover: #5C7691; /* 9 · Richer slate (refresh from #7A8899) */ --cluster-cover-deep: #3E5269; --cluster-cover-surface: #E8EDF3; --cluster-mentorship: #EBC788; /* 10 · Champagne (shared family with C4) */ --cluster-mentorship-deep: #D4AF37; /* 10 · obsidian-gold — Global Mentor */ --cluster-mentorship-obsidian: #1A1A1A; --cluster-mentorship-surface: #FBF6EA; --cluster-admin: #7CC177; /* 11 · Apple-vibrancy sage (refresh from #9CAF88) */ --cluster-admin-deep: #4F8A4A; --cluster-admin-surface: #E5F1E0; --cluster-insight: #3B4CDA; /* 12 · Deep indigo (refresh from #3B4A8C) */ --cluster-insight-deep: #1F2D9A; --cluster-insight-starfield: #0A0B2E; --cluster-insight-light: #7D8AFF; --cluster-insight-surface: #E2E5FB; /* Canonical aliases (v1.4.21 Bundle §6) — existing names retained for backward-compat. */ --cluster-mss: var(--cluster-marketing); /* canonical name for Cluster 03 */ /* === Backward-compat aliases (v1.4.22 Band 1.5) === Additional v1.4.15 token names that pre-2026-05-13 surfaces still reference. Mapped to canonical v1.4.21 tokens so legacy surfaces render without per-file repaint. */ --cluster-finance-legacy: #7BC9A0; /* preserved mint reference — pre-emerald rollback */ --cluster-marketing-legacy: var(--cluster-marketing); /* idempotent — older Beacon/Boost tiles */ --cluster-hands: var(--cluster-insight); /* engine-class rename → AI Agents; resolves under Cluster 12 */ --cluster-foresight-hands: var(--cluster-insight); /* surface rename → Foresight · Team */ --cluster-esg: var(--mint); /* legacy → Stewardship Reports tint */ /* RESERVED — Skip-Level Alerting (P22) + warning states ONLY · do not use for clusters */ --alert-red: var(--apple-red); /* now resolves to Apple Red · was #E53935 */ } /* Light — Apple-canonical · PURE WHITE #FFFFFF · NEVER cream/beige (Canon §4) */ :root[data-theme="light"], :root.theme-light { --ink-0: #FFFFFF; --ink-1: #F5F5F7; --ink-2: #F5F5F7; --ink-3: #E8E8ED; --line: rgba(60,60,67,0.12); --line-strong: rgba(60,60,67,0.22); --paper: #1D1D1F; --paper-dim: rgba(29,29,31,0.84); --paper-mute: rgba(29,29,31,0.66); --paper-faint: rgba(29,29,31,0.52); --amber: #B8821E; --amber-bright: #D4982C; --amber-soft: rgba(184,130,30,0.12); --amber-glow: rgba(184,130,30,0.22); --mint: #2F8B68; --mint-soft: rgba(47,139,104,0.12); --rose: #B05448; --rose-soft: rgba(176,84,72,0.12); --violet: #7C3AED; --violet-soft: rgba(124,58,237,0.12); --sky: #4178A8; --sky-soft: rgba(65,120,168,0.12); --hero-tint: radial-gradient(900px 600px at 80% -10%, rgba(124,193,119,0.04), transparent 60%); /* Cluster tokens — light theme harmony-shift (same identity, lower luminance for contrast on paper) */ --cluster-onboarding: #6A8CA0; --heartbeat-velvet: #5C1622; --heartbeat-velvet-warm: #6B1E2D; --cluster-marketing: #4178A8; --cluster-commerce: #B8821E; --cluster-finance: #4E9B73; --cluster-procurement: #B05A48; --cluster-people: #6B5FB4; --cluster-trust: #564A8E; --cluster-cover: #4A5868; --cluster-mentorship: #C49E62; --cluster-mentorship-deep: #A88410; --cluster-mentorship-obsidian: #1A1A1A; --cluster-admin: #6A7E58; --cluster-insight: #2C3A6E; /* 12 · indigo, harmony-adjusted */ --cluster-insight-starfield: #4F5E94; --cluster-mss: var(--cluster-marketing); /* Backward-compat aliases — light theme (v1.4.22) */ --cluster-finance-legacy: #4E9B73; --cluster-marketing-legacy: var(--cluster-marketing); --cluster-hands: var(--cluster-insight); --cluster-foresight-hands: var(--cluster-insight); --cluster-esg: var(--mint); --alert-red: #C62828; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --ink-0: #FFFFFF; --ink-1: #F5F5F7; --ink-2: #F5F5F7; --ink-3: #E8E8ED; --line: rgba(60,60,67,0.12); --line-strong: rgba(60,60,67,0.22); --paper: #1D1D1F; --paper-dim: rgba(29,29,31,0.84); --paper-mute: rgba(29,29,31,0.66); --paper-faint: rgba(29,29,31,0.52); --amber: #B8821E; --amber-bright: #D4982C; --amber-soft: rgba(184,130,30,0.12); --amber-glow: rgba(184,130,30,0.22); --mint: #2F8B68; --mint-soft: rgba(47,139,104,0.12); --rose: #B05448; --rose-soft: rgba(176,84,72,0.12); --violet: #7C3AED; --violet-soft: rgba(124,58,237,0.12); --sky: #4178A8; --sky-soft: rgba(65,120,168,0.12); --hero-tint: radial-gradient(900px 600px at 80% -10%, rgba(124,193,119,0.04), transparent 60%); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink-0); color: var(--paper); font-family: var(--font-sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; } body::before { content: ""; position: fixed; inset: 0; background: var(--hero-tint); pointer-events: none; z-index: 0; } /* Theme toggle pill — drop into any page */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: rgba(127,127,127,0.08); border: 1px solid var(--line); border-radius: 999px; } .theme-toggle button { width: 26px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--paper-mute); transition: all .2s; } .theme-toggle button.on { background: var(--amber); color: var(--ink-0); } .theme-toggle svg { width: 13px; height: 13px; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } a { color: inherit; } ::selection { background: var(--amber-glow); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: -0.01em; } .serif { font-family: var(--font-serif); } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* per Atlas Restoration §2.3 step 7 · financial surfaces */ /* Status diagnostic helpers · observational only (per SR4.4 §4) */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .status-dot.healthy { background: var(--status-healthy); } .status-dot.attention { background: var(--status-attention); } .status-dot.offbalance { background: var(--status-offbalance); } .status-dot.neutral { background: var(--status-neutral); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper-dim); } .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); font-weight: 500; font-size: 13px; transition: background .2s; color: var(--paper); } .btn:hover { background: rgba(255,255,255,0.06); } .btn-amber { background: var(--amber); color: var(--ink-0); border-color: var(--amber); } .btn-amber:hover { background: var(--amber-bright); } .btn-ghost { border-color: transparent; } .key { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--paper-dim); line-height: 1; } .card { background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-1) 100%); border: 1px solid var(--line); border-radius: 14px; } .topbar { position: sticky; top: 0; z-index: 50; padding: 14px 28px; display: flex; align-items: center; gap: 16px; background: linear-gradient(180deg, rgba(8,8,11,0.92), rgba(8,8,11,0.65)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); } .topbar a.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font-weight: 600; } .crumb-sep { color: var(--paper-faint); } .crumb { font-size: 14px; color: var(--paper-dim); } .tabs { display: flex; gap: 2px; padding: 3px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 999px; } .tabs button { padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--paper-dim); transition: all .2s; } .tabs button.on { background: var(--amber); color: var(--ink-0); } .win-switch { display: flex; gap: 4px; padding: 3px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 8px; } .win-switch button { padding: 4px 10px; border-radius: 6px; font-size: 11.5px; color: var(--paper-mute); } .win-switch button.on { background: var(--amber-soft); color: var(--amber); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }