/* * Phase 6a baseline styles for the Synesis P_success frontend. * * Card-based layout with progressive disclosure. Sections start hidden * (via the `hidden` HTML attribute) and main.js reveals them as the user * advances through the flow: setup → research → parameters / scenarios / * benchmarks / Monte Carlo. The full theme port from * `../SynesisLabs Platform/psuccess-platform.html` is still deferred — * this pass is the structural rework, with the visual upgrade staying * intentionally light so the markup is what we're committing to, not * the colours. */ /* === Tokens =============================================================== */ /* Single source of truth for the colour palette. Tweak here, not at */ /* per-component sites. The hex values stay close to the legacy brand */ /* so a future dark-theme port stays a colour swap, not a layout fight. */ :root, [data-theme="light"] { --bg: #f5f7fa; --surface: #ffffff; --surface-muted: #f7fafc; --border: #e2e8f0; --border-strong: #cbd5e0; --text: #1a202c; --text-muted: #4a5568; --text-subtle: #718096; --accent: #2b6cb0; --accent-strong: #1e3a5f; --accent-soft: rgba(43, 108, 176, 0.08); --good: #2f855a; --good-soft: #d1fae5; --warn: #b7791f; --warn-soft: #fef3c7; --bad: #c53030; --bad-soft: #fee2e2; --orange: #f97316; --modal-backdrop: rgba(15, 23, 42, 0.45); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); } /* Dark-theme token overrides. Same variable names, different values — * every component reads via `var(--*)` so swapping the attribute on * `` swaps the whole UI without touching any per-component CSS. * Soft variants use rgba alpha so coloured backgrounds blend onto the * dark surfaces correctly; light mode's pastel solids would look * garish on a dark card. */ [data-theme="dark"] { --bg: #0b1120; --surface: #131c30; --surface-muted: #1c2740; --border: #2a3656; --border-strong: #475569; --text: #e7ecf3; --text-muted: #cbd5e0; --text-subtle: #8c9ab2; --accent: #38bdf8; --accent-strong: #7dd3fc; --accent-soft: rgba(56, 189, 248, 0.14); --good: #34d399; --good-soft: rgba(52, 211, 153, 0.18); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.18); --bad: #f87171; --bad-soft: rgba(248, 113, 113, 0.18); --orange: #fb923c; --modal-backdrop: rgba(0, 0, 0, 0.6); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); } /* Smooth-but-not-distracting transition when the user toggles. Picks * the properties that actually change so the page doesn't animate * unrelated layout shifts. */ html { transition: background-color 0.15s linear; } body { transition: background-color 0.15s linear, color 0.15s linear; } /* === Page-level ========================================================== */ /* Constrained reading column, neutral background, consistent type ramp. */ * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } main { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } /* === App header ========================================================== */ /* Sticks to the top of the page (no scroll detach). Title on the left, */ /* account chip on the right; the chip is hidden when no session exists. */ .app-header { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); } .app-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .app-title .title-accent { color: var(--accent); } .app-header-actions { display: flex; align-items: center; gap: 0.75rem; } .account-chip { display: flex; align-items: center; gap: 0.75rem; } /* The signed-in email in the header. It's a