/* ===================================================================== SO CHERRY — DESIGN TOKENS The single source of truth for the So Cherry visual system. Black luxury studio surface · cherry red as signal, never wallpaper. Import this first, everywhere. Never hardcode a hex in a component. ===================================================================== */ :root { /* --------------------------------------------------------------- 1. SURFACE — the black studio. Built from near-black neutrals with a faint warm (cherry-leaning) undertone, not pure #000. Pure black looks cheap on OLED; warm graphite looks expensive. --------------------------------------------------------------- */ --surface-void: #08070A; /* deepest background, page base */ --surface-base: #0C0A0F; /* app canvas */ --surface-raised: #121016; /* cards, panels */ --surface-overlay: #18151D; /* drawers, popovers, modals */ --surface-inset: #060509; /* wells, prompt field, code, timeline */ --surface-hover: #1E1A24; /* row / control hover */ --surface-active: #261F2E; /* pressed / selected */ /* Hairlines & dividers — low-contrast, never pure white */ --line-faint: rgba(255,255,255,0.06); --line-soft: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.16); /* --------------------------------------------------------------- 2. INK — text on the dark surface. Tuned for long sessions. --------------------------------------------------------------- */ --ink-primary: #F4F1F5; /* headlines, primary text — soft white */ --ink-secondary: #B7B1BE; /* body, secondary */ --ink-tertiary: #7C7585; /* captions, metadata, placeholder */ --ink-disabled: #4A4551; --ink-inverse: #0C0A0F; /* text on cherry / on light fills */ /* --------------------------------------------------------------- 3. CHERRY — the signal color. Used for ONE primary action per view, live/active states, focus, and brand moments. If cherry is everywhere, it is nowhere. Treat it like a laser, not paint. --------------------------------------------------------------- */ --cherry-core: #E11D38; /* THE red — primary action, brand */ --cherry-bright: #FF2D4F; /* hover / glow peak */ --cherry-deep: #A50E26; /* pressed, gradients' dark stop */ --cherry-flesh: #F26D7D; /* soft tint, inner highlight on 3D fruit */ --cherry-skin-hi: #FF6378; /* specular hit on the 3D cherry */ --stem: #5B6650; /* olive-graphite stem/leaf — the "soul" */ --stem-hi: #8A9577; /* Cherry used as a translucent wash (signal glows, focus rings) */ --cherry-12: rgba(225,29,56,0.12); --cherry-20: rgba(225,29,56,0.20); --cherry-40: rgba(225,29,56,0.40); --cherry-glow: 0 0 0 1px rgba(225,29,56,0.35), 0 8px 30px -6px rgba(225,29,56,0.45); /* --------------------------------------------------------------- 4. STATUS — semantic, desaturated to sit inside the dark studio. Cherry is reserved for brand/primary; status uses its own set so "live render" never competes with "error". --------------------------------------------------------------- */ --status-live: #E11D38; /* generating / streaming (cherry pulse) */ --status-success: #3FB984; /* complete */ --status-warn: #E8A53D; /* needs attention / low credits */ --status-error: #FF5247; /* failed */ --status-queued: #6E7BF2; /* waiting in queue (cool, calm) */ --status-info: #58A6FF; /* --------------------------------------------------------------- 5. MODALITY ACCENTS — faint identity dots by capability, NOT vendor. We route to API-accessible models and don't brand by provider on the surface. Muted so the asset grid stays calm; 6px dots/labels. --------------------------------------------------------------- */ --p-image: #B7C2CC; --p-video: #9AA0C4; --p-audio: #7FD1C6; --p-voice: #C9A6E8; --p-music: #E8B98F; --p-vfx: #9FB39C; /* --------------------------------------------------------------- 6. TYPOGRAPHY Display: a refined grotesk for the luxury/editorial voice. UI/Body: a neutral, dense workhorse for the studio. Mono: numerals, credits, seeds, timecodes, model ids. --------------------------------------------------------------- */ --font-display: "PP Neue Montreal", "Söhne", "Inter Display", "Helvetica Neue", system-ui, sans-serif; --font-ui: "Inter", "Söhne", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Söhne Mono", "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Type scale — tight, editorial. rem-based on 16px root. */ --t-display: clamp(2.75rem, 6vw, 5.25rem); /* hero */ --t-h1: clamp(2rem, 4vw, 3rem); --t-h2: 1.75rem; --t-h3: 1.25rem; --t-body-lg: 1.0625rem; --t-body: 0.9375rem; /* 15px — default UI body */ --t-sm: 0.8125rem; /* 13px — captions, labels */ --t-xs: 0.6875rem; /* 11px — metadata, eyebrows */ --leading-tight: 1.04; /* display */ --leading-snug: 1.25; --leading-body: 1.55; --tracking-display: -0.022em; /* negative tracking = expensive feel */ --tracking-tight: -0.01em; --tracking-eyebrow: 0.14em; /* uppercase eyebrows, wide */ /* --------------------------------------------------------------- 7. SPACE — 4px base grid. Названия by step, not by pixel. --------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* --------------------------------------------------------------- 8. RADIUS — soft but not bubbly. Sculptural, like a milled object. --------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* --------------------------------------------------------------- 9. ELEVATION — shadows on black are about depth + a faint warm ambient, plus a 1px top highlight to fake a milled edge. --------------------------------------------------------------- */ --edge-top: inset 0 1px 0 rgba(255,255,255,0.05); /* milled top edge */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), var(--edge-top); --shadow-md: 0 6px 24px -8px rgba(0,0,0,0.65), var(--edge-top); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.75), var(--edge-top); --shadow-pop: 0 30px 80px -20px rgba(0,0,0,0.85), 0 0 0 1px var(--line-soft); /* --------------------------------------------------------------- 10. MOTION — cinematic, weighted. Nothing snaps. Nothing bounces childishly. Easings are camera-like. --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default reveal */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* movement */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* used SPARINGLY */ --dur-1: 120ms; /* hover, micro */ --dur-2: 200ms; /* controls, toggles */ --dur-3: 320ms; /* panels, drawers */ --dur-4: 600ms; /* hero / cinematic reveals */ /* --------------------------------------------------------------- 11. LAYOUT --------------------------------------------------------------- */ --nav-w: 76px; /* collapsed rail (icon) */ --nav-w-open: 248px; /* expanded nav */ --rightdock-w: 380px; /* properties / model / routing dock */ --topbar-h: 56px; --maxw-prose: 68ch; --maxw-page: 1280px; --z-base: 0; --z-dock: 50; --z-drawer: 200; --z-modal: 400; --z-toast: 600; --blur-pop: blur(20px) saturate(140%); /* USED SPARINGLY — see rules */ } /* Single-source light-on-dark is the only theme at launch. A future "Daylight" review theme can override --surface-* + --ink-*. */ * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--surface-base); color: var(--ink-primary); font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--leading-body); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }