/* ============================================================ CHAOSFLOW-PRODUCT-SHELL-1A — Design Tokens Quiet Luxury AI Operating System ------------------------------------------------------------ These tokens define the premium product shell's visual language. They are layered ON TOP of the existing style.css tokens (--uc-*) — not a replacement. Pages using the new shell reference --cf-* tokens; legacy pages keep --uc-*. Design direction: cold grey-ink dark, warm-white text, low saturation blue-grey secondary, restrained brand red. No purple. No neon. No heavy shadows. ============================================================ */ :root { /* --- Background hierarchy (layered surfaces, never pure black) --- */ --cf-bg-canvas: #0E1014; /* deepest — page background */ --cf-surface-1: #14171D; /* sidebar / rail background */ --cf-surface-2: #1A1E26; /* cards, panels */ --cf-elevated: #20252F; /* elevated cards, dropdowns */ --cf-hover: #262C38; /* hover state for interactive */ --cf-selected: #2D1A22; /* selected / active module tint */ /* --- Text --- */ --cf-text-primary: #F2F4F7; /* warm white — headings & body */ --cf-text-secondary: #B4BCC8; /* descriptions, captions */ --cf-text-muted: #7E8693; /* meta, timestamps */ --cf-text-faint: #5A6170; /* placeholders */ /* --- Brand accent (restrained red) --- */ --cf-red: #E8334A; /* primary CTA, active module icon */ --cf-red-hover: #D42A40; --cf-red-soft: rgba(232, 51, 74, 0.08); --cf-red-tint: rgba(232, 51, 74, 0.14); /* --- Secondary accent (low-saturation blue-grey) --- */ --cf-blue: #6B86B0; --cf-blue-soft: rgba(107, 134, 176, 0.10); /* --- Status (muted, not high-sat) --- */ --cf-success: #4E9B6E; --cf-success-soft: rgba(78, 155, 110, 0.10); --cf-warning: #C9A03A; --cf-warning-soft: rgba(201, 160, 58, 0.10); --cf-danger: #C84A4A; --cf-danger-soft: rgba(200, 74, 74, 0.10); --cf-info: #5B8AB0; --cf-info-soft: rgba(91, 138, 176, 0.10); /* --- Borders (minimal — only where structurally needed) --- */ --cf-border: #252A34; --cf-border-soft: #1E222B; --cf-divider: #1C2028; /* --- Radii --- */ --cf-radius-sm: 8px; --cf-radius-md: 12px; --cf-radius-lg: 16px; /* --- Shadows (very light) --- */ --cf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --cf-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16); --cf-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.20); /* --- Spacing (4px base, 8px rhythm) --- */ --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px; --cf-space-5: 24px; --cf-space-6: 32px; --cf-space-7: 48px; --cf-space-8: 64px; /* --- Typography --- */ --cf-font-family: "Inter", "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --cf-font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", "Consolas", monospace; --cf-text-display: 40px; --cf-text-page-title: 30px; --cf-text-section: 22px; --cf-text-card-title: 17px; --cf-text-body: 15px; --cf-text-caption: 13px; --cf-text-micro: 11px; --cf-leading-tight: 1.3; --cf-leading-normal: 1.55; --cf-leading-relaxed: 1.7; /* --- Motion --- */ --cf-motion-fast: 160ms ease-out; --cf-motion-normal: 200ms ease-out; --cf-motion-slow: 280ms ease-out; /* --- Layout widths --- */ --cf-rail-width: 64px; --cf-sidebar-width: 260px; --cf-context-width: 340px; --cf-max-content: 960px; } @media (prefers-reduced-motion: reduce) { :root { --cf-motion-fast: 0ms; --cf-motion-normal: 0ms; --cf-motion-slow: 0ms; } } /* ============================================================ CHAOSFLOW-VISUAL-SYSTEM-2A — Workbench Design Tokens ------------------------------------------------------------ Deep Graphite + Ice Blue visual system for the Content Workbench. Layered ON TOP of the existing --cf-* tokens. Pages that don't use the workbench classes are unaffected. Design direction (per DESIGN.md / Stitch screen.png): - Surface hierarchy by lightness, not shadows - 1px borders (#2A2D35) for structural separation - Ice Blue (#70A5C2) as primary action color - Red (#FFB4AB) reserved for real risks/blockers - Orange (#F7BB7F) for warnings / pending validation - No purple. No neon. No heavy shadows. - 4px radius for buttons/inputs (not full-pill) ============================================================ */ :root { /* --- Workbench background hierarchy (Stitch-aligned) --- */ --cf-wb-bg: #121315; --cf-wb-bg-deep: #0D0E10; --cf-wb-surface: #16181D; --cf-wb-surface-low: #1B1C1E; --cf-wb-surface-high: #222529; --cf-wb-surface-highest: #343537; /* --- Workbench borders --- */ --cf-wb-border: #2A2D35; --cf-wb-border-strong: #41484D; /* --- Workbench text --- */ --cf-wb-text: #E3E2E5; --cf-wb-text-secondary: #C0C7CD; --cf-wb-text-muted: #8A9297; /* --- Workbench primary (Ice Blue) --- */ --cf-wb-primary: #70A5C2; --cf-wb-primary-light: #98CEEC; --cf-wb-primary-deep: #2C647F; --cf-wb-primary-soft: rgba(112, 165, 194, 0.10); --cf-wb-primary-tint: rgba(112, 165, 194, 0.18); /* --- Workbench status colors --- */ --cf-wb-danger: #FFB4AB; --cf-wb-danger-bg: rgba(255, 180, 171, 0.08); --cf-wb-danger-border: rgba(255, 180, 171, 0.22); --cf-wb-warning: #F7BB7F; --cf-wb-warning-bg: rgba(247, 187, 127, 0.08); --cf-wb-warning-border: rgba(247, 187, 127, 0.22); --cf-wb-success: #8DD0A8; --cf-wb-success-bg: rgba(141, 208, 168, 0.08); --cf-wb-success-border: rgba(141, 208, 168, 0.22); --cf-wb-neutral: #8A9297; --cf-wb-neutral-bg: rgba(138, 146, 151, 0.08); /* --- Workbench radii (4px default, NOT pill) --- */ --cf-wb-radius-sm: 4px; --cf-wb-radius-md: 6px; --cf-wb-radius-lg: 8px; /* --- Workbench typography --- */ --cf-wb-font-display: "Geist", "Inter", "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --cf-wb-font-body: "Inter", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --cf-wb-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Consolas", monospace; /* --- Workbench layout widths --- */ --cf-wb-pipeline-min: 1100px; /* horizontal scroll below this */ }