/* ============================================================================= editorial-theme.css — "PRESS" Editorial design system for Creative Studio Phase 0 foundation. Author: CASE · 2026-06-01 Spec source of truth: DESIGN_SYSTEM.md (coral primary, Playfair + Be Vietnam Pro + JetBrains Mono, color-coded modes, light + dark). HOW IT WORKS — drop-in, loaded LAST in of every surface so its :root wins the cascade over the app's own token block. Four layers: A. PRESS source tokens (paper/ink/line, 5 mode accents, fonts, radius, shadow) — light + dark B. BRIDGE — remaps the app's EXISTING tokens (--bg-*, --accent-*, --font-*, --radius-*, --shadow-*) onto PRESS values, so the ~1,500 var() usages re-skin with zero markup change C. Tailwind utility overrides (!important) — re-skins the ~726 hard-coded palette utilities (slate/purple/emerald/white/black). Extends the pattern the app already uses. D. Component class library (ed-* prefix) — editorial recipes for Phase 1-4 markup. WHY ed- prefix: .card/.field/.kicker/.mono already exist as app CSS rules; namespacing prevents clobbering existing components. ========================================================================== */ /* ===== A. PRESS SOURCE TOKENS — light (default) ===== */ :root { /* paper & ink */ --paper-0:#FBF8F1; --paper-1:#FFFFFF; --paper-2:#F2ECE0; --paper-3:#E9E1D1; --ink-0:#16120D; --ink-1:#3A332A; --ink-2:#6A6155; --ink-3:#9A9081; --line:#E3DACA; --line-strong:#CFC4AE; --ink-invert:#FBF8F1; /* mode accent palettes (base / soft tint / ink-on-soft) */ --c-coral:#E8492B; --c-coral-soft:#FBE3DC; --c-coral-ink:#8E2614; --c-violet:#6B3BE6; --c-violet-soft:#E8E0FB; --c-violet-ink:#3E1F94; --c-teal:#0E8A6E; --c-teal-soft:#D6EEE6; --c-teal-ink:#0A5443; --c-amber:#D9851A; --c-amber-soft:#F8EBD3; --c-amber-ink:#855011; --c-indigo:#3D5BD4; --c-indigo-soft:#DEE4FA; --c-indigo-ink:#233A95; --c-rose:#C4356E; --c-rose-soft:#F7DEE9; --c-rose-ink:#84204A; /* ACTIVE accent — default coral (Storyboard / global primary). Every component reads --accent*; flip data-mode and the subtree recolors. */ --accent:var(--c-coral); --accent-soft:var(--c-coral-soft); --accent-ink:var(--c-coral-ink); /* fonts */ --font-display:'Playfair Display', Georgia, 'Times New Roman', serif; --font-ui:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono:'JetBrains Mono', ui-monospace, Menlo, Monaco, monospace; /* radius — soft (default editorial set) */ --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:22px; --r-full:999px; /* shadow — warm ink, subtle (lean on borders, not elevation) */ --sh-sm:0 1px 2px rgba(22,18,13,.06), 0 1px 1px rgba(22,18,13,.04); --sh-md:0 6px 20px rgba(22,18,13,.08), 0 2px 6px rgba(22,18,13,.05); --sh-lg:0 20px 48px rgba(22,18,13,.12), 0 6px 16px rgba(22,18,13,.07); /* motion */ --ease:cubic-bezier(.32,.72,0,1); --fast:130ms; --base:240ms; --slow:420ms; } /* ===== A(dark). data-theme="dark" token swap ===== */ [data-theme="dark"] { --paper-0:#14110D; --paper-1:#1E1A14; --paper-2:#100D0A; --paper-3:#2A251E; --ink-0:#F4EEE2; --ink-1:#D8CFBF; --ink-2:#9C9384; --ink-3:#6E665A; --line:#2C2820; --line-strong:#423C31; --ink-invert:#14110D; --c-coral:#FF6A4D; --c-coral-soft:#3A1E16; --c-coral-ink:#FFB6A4; --c-violet:#9E7BFF; --c-violet-soft:#251A45; --c-violet-ink:#CDBCFF; --c-teal:#2BC39C; --c-teal-soft:#0E2E27; --c-teal-ink:#8FE6D0; --c-amber:#F0A93B; --c-amber-soft:#36280F; --c-amber-ink:#F7CF8C; --c-indigo:#7E97FF; --c-indigo-soft:#1A2347; --c-indigo-ink:#BCC9FF; --c-rose:#F2769F; --c-rose-soft:#3A1626; --c-rose-ink:#FAB8CF; --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 6px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); --sh-lg:0 20px 48px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.45); } /* ===== A(modes). data-mode accent switching (set on or any wrapper) ===== */ [data-mode="storyboard"]{ --accent:var(--c-coral); --accent-soft:var(--c-coral-soft); --accent-ink:var(--c-coral-ink); } [data-mode="branding"] { --accent:var(--c-violet); --accent-soft:var(--c-violet-soft); --accent-ink:var(--c-violet-ink); } [data-mode="slides"] { --accent:var(--c-teal); --accent-soft:var(--c-teal-soft); --accent-ink:var(--c-teal-ink); } [data-mode="motion"] { --accent:var(--c-amber); --accent-soft:var(--c-amber-soft); --accent-ink:var(--c-amber-ink); } [data-mode="present"] { --accent:var(--c-indigo); --accent-soft:var(--c-indigo-soft); --accent-ink:var(--c-indigo-ink); } [data-mode="sequence"] { --accent:var(--c-rose); --accent-soft:var(--c-rose-soft); --accent-ink:var(--c-rose-ink); } /* ============================================================================= B. BRIDGE — existing app tokens → PRESS (this is what auto-reskins the app) ========================================================================== */ :root { /* backgrounds */ --bg-canvas:var(--paper-0); --bg-elevated:var(--paper-1); --bg-muted:var(--paper-2); --bg-sunken:var(--paper-3); --border:var(--line); --border-strong:var(--line-strong); /* accent scale (olive → coral family) — derived coral tints */ --accent-50:#FDEEEA; --accent-100:var(--accent-soft); --accent-200:#F6C3B5; --accent-300:#F09A82; --accent-400:#ED6E4F; --accent-500:var(--accent); --accent-600:#D43F22; --accent-700:var(--accent-ink); --accent-800:#73200F; --accent-900:#5A1809; /* director / agentic accent — align to PRESS violet so it reads intentional */ --director-50:var(--c-violet-soft); --director-100:var(--c-violet-soft); --director-300:#B299F5; --director-500:var(--c-violet); --director-700:var(--c-violet-ink); /* semantic — harmonize with PRESS + auto-adapt to dark via mode tokens */ --success-bg:var(--c-teal-soft); --success-fg:var(--c-teal-ink); --success-500:var(--c-teal); --warn-bg:var(--c-amber-soft); --warn-fg:var(--c-amber-ink); --warn-500:var(--c-amber); /* fonts */ --font-display:'Playfair Display', Georgia, 'Times New Roman', serif; --font-body:var(--font-ui); /* radius */ --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --radius-xl:var(--r-xl); --radius-2xl:26px; --radius-full:var(--r-full); /* shadow */ --shadow-xs:var(--sh-sm); --shadow-sm:var(--sh-sm); --shadow-md:var(--sh-md); --shadow-lg:var(--sh-lg); --shadow-cinema:var(--sh-lg); } /* base element re-skin (app hard-codes body color to dark green) */ body { color:var(--ink-1); background-color:var(--paper-0); } /* ============================================================================= C. TAILWIND UTILITY OVERRIDES (!important — beat Tailwind CDN runtime injection) Neutrals (slate/gray/stone/zinc/neutral) → ink/paper/line. Brand colors (purple/violet/indigo/emerald) → single accent. white/black → paper/ink. amber + red left intact (semantic warn/error). ========================================================================== */ /* --- surfaces: white & light neutrals → paper --- */ .bg-white{ background-color:var(--paper-1)!important; } .bg-slate-50,.bg-gray-50,.bg-stone-50,.bg-zinc-50,.bg-neutral-50, .bg-slate-100,.bg-gray-100,.bg-stone-100,.bg-zinc-100,.bg-neutral-100{ background-color:var(--paper-2)!important; } .bg-slate-200,.bg-gray-200,.bg-stone-200,.bg-zinc-200,.bg-neutral-200, .bg-slate-300,.bg-gray-300,.bg-stone-300,.bg-zinc-300,.bg-neutral-300{ background-color:var(--paper-3)!important; } /* dark fills (chips, dark bars) → ink (theme-aware; inverts cleanly in dark) */ .bg-slate-700,.bg-gray-700,.bg-zinc-700,.bg-neutral-700, .bg-slate-800,.bg-gray-800,.bg-zinc-800,.bg-neutral-800, .bg-slate-900,.bg-gray-900,.bg-zinc-900,.bg-neutral-900,.bg-black{ background-color:var(--ink-0)!important; } /* --- text: neutral scale → ink scale --- */ .text-slate-900,.text-gray-900,.text-zinc-900,.text-neutral-900, .text-slate-800,.text-gray-800,.text-zinc-800,.text-neutral-800{ color:var(--ink-0)!important; } .text-slate-700,.text-gray-700,.text-zinc-700,.text-neutral-700, .text-slate-600,.text-gray-600,.text-zinc-600,.text-neutral-600{ color:var(--ink-1)!important; } .text-slate-500,.text-gray-500,.text-zinc-500,.text-neutral-500{ color:var(--ink-2)!important; } .text-slate-400,.text-gray-400,.text-zinc-400,.text-neutral-400, .text-slate-300,.text-gray-300,.text-zinc-300,.text-neutral-300{ color:var(--ink-3)!important; } .text-white{ color:var(--ink-invert)!important; } /* --- borders: neutral → line --- */ .border-slate-200,.border-gray-200,.border-stone-200,.border-zinc-200,.border-neutral-200, .border-slate-100,.border-gray-100{ border-color:var(--line)!important; } .border-slate-300,.border-gray-300,.border-stone-300,.border-zinc-300,.border-neutral-300, .border-slate-400,.border-gray-400{ border-color:var(--line-strong)!important; } .border-white{ border-color:var(--ink-invert)!important; } /* --- brand colors (purple / violet / indigo / emerald / green) → single accent --- */ .bg-purple-50,.bg-violet-50,.bg-indigo-50,.bg-emerald-50,.bg-green-50, .bg-purple-100,.bg-violet-100,.bg-indigo-100,.bg-emerald-100,.bg-green-100{ background-color:var(--accent-soft)!important; } .bg-purple-500,.bg-violet-500,.bg-indigo-500,.bg-emerald-500,.bg-green-500, .bg-purple-600,.bg-violet-600,.bg-indigo-600,.bg-emerald-600,.bg-green-600, .bg-purple-700,.bg-violet-700,.bg-indigo-700,.bg-emerald-700,.bg-green-700{ background-color:var(--accent)!important; } .text-purple-600,.text-violet-600,.text-indigo-600,.text-emerald-600,.text-green-600, .text-purple-700,.text-violet-700,.text-indigo-700,.text-emerald-700,.text-green-700, .text-purple-800,.text-violet-800,.text-indigo-800,.text-emerald-800,.text-green-800{ color:var(--accent-ink)!important; } .text-purple-300,.text-violet-300,.text-indigo-300,.text-emerald-300{ color:var(--accent)!important; } .border-purple-200,.border-violet-200,.border-indigo-200,.border-emerald-200, .border-purple-300,.border-violet-300,.border-indigo-300{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line))!important; } .border-purple-400,.border-purple-500,.border-violet-500,.border-indigo-500,.border-emerald-500{ border-color:var(--accent)!important; } .ring-purple-200,.ring-purple-300,.ring-purple-400,.ring-violet-300,.ring-indigo-300{ --tw-ring-color:var(--accent-soft)!important; } /* ============================================================================= D. COMPONENT CLASS LIBRARY (ed- prefix) — editorial recipes for Phase 1-4 ========================================================================== */ /* type helpers */ .ed-serif{ font-family:var(--font-display); } .ed-display{ font-family:var(--font-display); font-weight:800; letter-spacing:-.015em; line-height:1.0; color:var(--ink-0); } .ed-display-it{ font-family:var(--font-display); font-style:italic; font-weight:500; } .ed-mono{ font-family:var(--font-mono); } /* kicker / eyebrow — the signature element */ .ed-kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); font-weight:500; } .ed-kicker-accent{ color:var(--accent-ink); } /* hairline rules */ .ed-rule{ border:0; border-top:1px solid var(--line); } .ed-rule-ink{ border:0; border-top:2px solid var(--ink-0); } /* buttons — pill */ .ed-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:14px; font-weight:600; padding:10px 20px; border-radius:var(--r-full); border:1px solid transparent; cursor:pointer; transition:all var(--fast) var(--ease); text-decoration:none; line-height:1; } .ed-btn:active{ transform:translateY(1px); } .ed-btn:disabled{ opacity:.4; pointer-events:none; } .ed-btn-sm{ padding:6px 13px; font-size:13px; } .ed-btn-icon{ width:38px; height:38px; padding:0; justify-content:center; border-radius:var(--r-full); } .ed-btn-ink{ background:var(--ink-0); color:var(--paper-0); } .ed-btn-ink:hover{ background:var(--accent); color:var(--ink-invert); } .ed-btn-accent{ background:var(--accent); color:var(--ink-invert); } .ed-btn-accent:hover{ filter:brightness(1.06); } .ed-btn-soft{ background:var(--accent-soft); color:var(--accent-ink); } .ed-btn-soft:hover{ filter:brightness(.97); } .ed-btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink-1); } .ed-btn-ghost:hover{ border-color:var(--ink-0); color:var(--ink-0); } /* tags / chips — mono */ .ed-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:var(--r-full); border:1px solid var(--line-strong); color:var(--ink-2); background:var(--paper-1); white-space:nowrap; } .ed-tag-accent{ background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; } .ed-tag-dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); } /* cards & wells */ .ed-card{ background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-lg); } .ed-card-interactive{ transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease); } .ed-card-interactive:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--accent); } .ed-well{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); } /* inputs */ .ed-field{ width:100%; background:var(--paper-1); border:1px solid var(--line-strong); border-radius:var(--r-md); padding:11px 14px; font-family:var(--font-ui); font-size:15px; color:var(--ink-1); transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .ed-field::placeholder{ color:var(--ink-3); } .ed-field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* mode / index card — big serif number + soft-accent chip (spec 4.6) */ .ed-index-num{ font-family:var(--font-display); font-weight:800; font-size:44px; line-height:.8; color:var(--accent); } .ed-mode-card{ display:flex; flex-direction:column; text-align:left; min-height:232px; padding:22px; background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-lg); cursor:pointer; transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease); } .ed-mode-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--accent); } .ed-mode-card-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; } .ed-mode-icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent-ink); flex-shrink:0; } .ed-mode-title{ font-size:21px; font-weight:700; color:var(--ink-0); margin:0 0 6px; line-height:1.1; } .ed-mode-desc{ font-size:13px; line-height:1.5; color:var(--ink-2); margin:0 0 18px; flex:1; } .ed-mode-cta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--accent); transition:gap var(--fast) var(--ease); } .ed-mode-card:hover .ed-mode-cta{ gap:11px; } /* module card — smaller, horizontal kicker badge */ .ed-module-card{ display:flex; flex-direction:column; text-align:left; padding:20px 22px; background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-lg); cursor:pointer; transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease); } .ed-module-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--accent); } /* media placeholder — 135° diagonal stripe (never invent fake imagery) */ .ed-media-stripe{ background:repeating-linear-gradient(135deg, var(--paper-2) 0 11px, var(--paper-3) 11px 22px); } /* board shot placeholders → dark film-stripe (PRESS reference) so white cs-shot-no + tags read */ .cs-shot .ed-media-stripe{ background:repeating-linear-gradient(135deg,#2a241c 0 12px,#211c15 12px 24px); } .cs-shot .ed-media-stripe .ed-tag{ background:rgba(255,255,255,.92); color:#211c15; border-color:transparent; } /* masthead display headline scale */ .ed-masthead{ font-family:var(--font-display); font-weight:800; letter-spacing:-.015em; line-height:1.0; font-size:clamp(30px,5vw,78px); color:var(--ink-0); } /* focus visibility (a11y — always-visible 3px accent-soft ring) */ .ed-focusable:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); } /* ===== E. INNER-SCREEN POLISH (central overrides, win cascade) ===== */ /* Branding/Slide canvas nodes — editorial hairline + restrained shadow */ .pc-node{ border:1px solid var(--line); box-shadow:var(--sh-sm); } .pc-node.pc-node-active{ box-shadow:0 0 0 2px var(--accent), var(--sh-md)!important; border-color:var(--accent); } .pc-node.pc-node-selected{ box-shadow:0 0 0 2px var(--accent-soft), var(--sh-md)!important; } /* generic app .card → editorial paper card (was used in galleries/panels) */ .card{ background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-lg); } /* app pill (status chips in header) → mono editorial tag feel */ .pill{ font-family:var(--font-mono); letter-spacing:.02em; border-radius:var(--r-full); } /* per-module header action buttons → PRESS pill recipe (was .nav-btn rounded-md 6px / weight 500) */ .nav-btn{ border-radius:var(--r-full)!important; font-weight:600!important; height:34px!important; padding:0 15px!important; border:1px solid var(--line-strong)!important; color:var(--ink-1)!important; background:transparent!important; gap:7px; } .nav-btn:hover{ border-color:var(--ink-0)!important; color:var(--ink-0)!important; background:transparent!important; } .nav-btn.is-active{ background:var(--accent)!important; border-color:var(--accent)!important; color:var(--ink-invert)!important; } .nav-btn.is-active span{ color:var(--ink-invert)!important; } /* lang switcher → pill container to match */ .lang-btn{ font-family:var(--font-mono); } /* ===== F. COMPONENT CONFORMANCE SWEEP (align stragglers to PRESS spec) ===== */ /* Slide composer control bar — was custom 9px/16px → PRESS r-md/r-lg */ .cmp-seg, .cmp-chip{ border-radius:var(--r-md)!important; } .cmp-bar{ border-bottom-left-radius:var(--r-lg)!important; border-bottom-right-radius:var(--r-lg)!important; } .cmp-seg{ border-color:var(--line)!important; } /* Tailwind shadows → PRESS warm-ink (editorial = subtle, warm, lean on borders not elevation) */ .shadow-sm{ box-shadow:var(--sh-sm)!important; } .shadow, .shadow-md{ box-shadow:var(--sh-md)!important; } .shadow-lg, .shadow-xl, .shadow-2xl{ box-shadow:var(--sh-lg)!important; } /* Modal / dropdown / panel / composer-card radii → unify to PRESS r-lg 14 (was Tailwind xl=12 / 2xl=16) */ .rounded-xl, .rounded-2xl{ border-radius:var(--r-lg)!important; } /* Tailwind rounded-md 6px → PRESS r-md 8px (small chips/badges/inputs) */ .rounded-md{ border-radius:var(--r-md)!important; } /* native form controls inherit system font → force PRESS UI font */ input, textarea, select, button, [contenteditable]{ font-family:var(--font-ui); } /* Tailwind font utilities (.font-sans = -apple-system stack) → PRESS fonts */ .font-sans{ font-family:var(--font-ui)!important; } .font-serif{ font-family:var(--font-display)!important; } .font-mono{ font-family:var(--font-mono)!important; }