/* ════════════════════════════════════════════════════════════════════════ SCRAPBOOK SKIN — App-wide Chrome (2026-04-28) ════════════════════════════════════════════════════════════════════════ This sheet ONLY paints when the user has picked the "scrapbook" skin from the toggle in the studio top bar. Everything in here is gated on `html[data-skin="scrapbook"]` so the default ("postpro") skin pages look exactly like before — this file is a no-op for postpro users. ─── ARCHITECTURE: OS-LEVEL SKINNING ─────────────────────────────────── Approved 2026-04-28 (Rony Scarfati): the skin only re-tints the OS chrome — outer page background, top bar, side rail. The inner BODY of each workflow tool stays in its native dark cyber instrument-panel design, regardless of which skin is active. The mental model: this is like Windows themes. The window chrome (title bar, taskbar, menus) follows the OS theme; the application inside the window owns its own UI. A user can switch from "Post Production" to "Scrapbook" and the chrome of every page repaints, but each tool's working surface — the place where the actual creative decisions happen — keeps the cyber design that makes precise control surfaces legible. Why we don't re-tint tool bodies anymore (this was the plan in the first draft of this file): a fully re-themed tool body forces every future tool layout, every chip, every drop zone, every focus state to be designed twice. That doubles the design budget and creates subtle drift between the two skins. Keeping the tool body skin- agnostic = one design, two chromes, zero drift. ─── SKIN CONTRACT ───────────────────────────────────────────────────── - Set on by the pre-paint script in base.html (and mirrored in pipeline_editor.html / kids/_base_kids.html for the standalone templates that don't extend base.html). - Stored per-browser in localStorage under "aifi.skin". - Two valid values: "postpro" (default), "scrapbook". - Toggle UI lives in the studio top bar (`#pe-skin-toggle`). - Sister CSS block in pipeline_editor.css re-skins the studio canvas. ─── PALETTE ─────────────────────────────────────────────────────────── Mirrored from the studio block in pipeline_editor.css. Single source of truth for the dimmed warm palette: vintage leather notebook in low candlelight, NOT manila folder in daylight. --sk-paper-canvas: #4a3a26 medium warm brown (page background) --sk-chrome: #2a1f15 very dark warm brown chrome (top bar, rail) --sk-chrome-deep: #1f160d one shade darker (inset chrome surfaces) --sk-ink-on-chrome: #c9b891 dimmed cream text (on dark chrome) --sk-ink-soft: #8a6a3a muted gold sepia (caption text) --sk-amber: #d4901c warm amber CTA accent */ html[data-skin="scrapbook"] { --sk-paper-canvas: #4a3a26; --sk-chrome: #2a1f15; --sk-chrome-deep: #1f160d; --sk-ink-on-chrome: #c9b891; --sk-ink-soft: #8a6a3a; --sk-amber: #d4901c; } /* ──────────────────────────────────────────────────────────────────── PAGE SHELL — outer body / shell containers ──────────────────────────────────────────────────────────────────── The body color shows in the gaps around the tool body. The tool body itself paints over with its own dark navy background, so this only matters for the page padding edges and the area behind transparent chrome elements. */ html[data-skin="scrapbook"] body.demo-effect-shell, html[data-skin="scrapbook"] body.wf-unified-shell, html[data-skin="scrapbook"] .page-shell.wf-unified-shell, html[data-skin="scrapbook"] .page-shell.demo-effect-shell { background: var(--sk-paper-canvas) !important; } /* Generic page-shell catch-all (tools that opt in without using demo-effect-shell). Less specific so per-tool overrides above win. */ html[data-skin="scrapbook"] body { background-color: var(--sk-paper-canvas); } /* ──────────────────────────────────────────────────────────────────── TOP CHROME — workflow header bar ──────────────────────────────────────────────────────────────────── `.demo-effect-topbar` is the workflow header (logo + nav + zoom slider). Re-skin to dark warm brown so it matches the studio rail. Text + icons inside flip to dimmed cream so they read on the dark chrome. */ html[data-skin="scrapbook"] .demo-effect-topbar { background: var(--sk-chrome); border-bottom: 1px solid rgba(201, 165, 107, 0.18); color: var(--sk-ink-on-chrome); } html[data-skin="scrapbook"] .demo-effect-topbar a, html[data-skin="scrapbook"] .demo-effect-topbar button { color: var(--sk-ink-on-chrome); } /* Zoom slider in the top bar — re-tint to amber accent. */ html[data-skin="scrapbook"] .wf-zoom-slider { accent-color: var(--sk-amber); } html[data-skin="scrapbook"] .wf-zoom-btn, html[data-skin="scrapbook"] .wf-zoom-label { color: var(--sk-ink-on-chrome); } /* ──────────────────────────────────────────────────────────────────── MEDIA RAIL — left vertical strip on workflow tool pages ──────────────────────────────────────────────────────────────────── Mirrors the studio rail treatment: dark warm chrome with cream inks. This is the one piece of the workflow page that gets fully re-skinned beyond the top bar — the rail is "OS-level" because it's the constant navigation surface that travels with the user across every tool. */ html[data-skin="scrapbook"] .wf-media-rail { background: var(--sk-chrome); border-right: 1px solid rgba(201, 165, 107, 0.18); color: var(--sk-ink-on-chrome); } html[data-skin="scrapbook"] .wf-rail-tabs { background: var(--sk-chrome); border-bottom: 1px solid rgba(201, 165, 107, 0.18); } html[data-skin="scrapbook"] .wf-rail-tab { color: rgba(201, 184, 145, 0.60); } html[data-skin="scrapbook"] .wf-rail-tab.is-active, html[data-skin="scrapbook"] .wf-rail-tab[aria-selected="true"] { color: var(--sk-ink-on-chrome); background: rgba(212, 144, 28, 0.20); border-bottom: 2px solid var(--sk-amber); } html[data-skin="scrapbook"] .wf-tools-search, html[data-skin="scrapbook"] .wf-tools-header input[type="search"] { background: var(--sk-chrome-deep); border: 1px solid rgba(201, 165, 107, 0.22); color: var(--sk-ink-on-chrome); } html[data-skin="scrapbook"] .wf-tools-search::placeholder { color: rgba(201, 184, 145, 0.40); } html[data-skin="scrapbook"] .wf-tools-view-btn, html[data-skin="scrapbook"] .wf-rail-collapse-btn { color: var(--sk-ink-on-chrome); } html[data-skin="scrapbook"] .wf-rail-empty, html[data-skin="scrapbook"] .wf-rail-importer { color: rgba(201, 184, 145, 0.55); } html[data-skin="scrapbook"] .wf-bin-add-btn { background: var(--sk-chrome-deep); color: var(--sk-ink-on-chrome); border: 1px dashed rgba(201, 165, 107, 0.35); } html[data-skin="scrapbook"] .wf-bin-add-btn:hover { background: #2f2218; border-color: var(--sk-amber); } /* ════════════════════════════════════════════════════════════════════════ TOOL BODY — INTENTIONALLY UN-SKINNED ════════════════════════════════════════════════════════════════════════ Everything below the top bar and to the right of the media rail (the 3-panel workspace, drop zones, look cards, promptline, generate bar, etc.) is left in its native dark cyber instrument-panel design. The workflow tool body is OS-agnostic — same in every skin. If you find yourself adding `html[data-skin="scrapbook"] .wf-*` rules below this line, STOP. Re-read the architecture block at the top of this file. The right place for tool-body styling is the canonical workflow_unified.css, not this file. */