/* ═══════════════════════════════════════════════════════════════════════════ PortrAI admin — ONE canonical design-system token set. Single source of truth for every color across BOTH historical systems (the Preact shell `:root`/admin.css AND the studio/booth `#pg-app`/pg-system.css + the `.vg-scope` video studio + the standalone HTML pages). Loaded on every admin surface (linked by the standalone pages, imported by the SPA). Each legacy palette block (admin.css :root, #pg-app, .vg-scope, editor) is now a THIN ALIAS layer that maps its old token names onto these — so the ~250 existing var() references keep resolving with zero churn. Light is the default (bare :root). Dark is an explicit, persisted choice (data-theme="dark" on , set by the shared theme toggle before first paint). We deliberately do NOT auto-follow prefers-color-scheme: this admin leads light and the operator opts into dark. To retheme the entire admin: edit the two token blocks below. Nothing else. ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Surfaces (light → dark ground stack) ── */ --bg: #e8e8f2; /* outermost app / gallery ground behind cards */ --surface-card: #ffffff; /* photo / look / job / stat / recipe cards, sidebars, dashboard card */ --surface-panel: #ffffff; /* modal body, dropdown, toast, popover (== card in light; separated by --raise + --border) */ --surface-sidebar: #ddd9ee; /* studio/booth/shell control rail — a distinct soft-lavender panel so the left column reads apart from the white cards + gallery ground */ --step-head: #f1eef8; /* section / step header bars, segmented-control tracks */ --field: #f1f1f9; /* form-control fills (inputs, selects, textareas, drop-zones, chips) */ --fill-subtle: #f6f6fb; /* faintest zebra / row / hover tint */ --field-line: #e0dded; /* input outline (distinct from a generic divider) */ /* ── Text ── */ --text: #201c2b; /* primary body text */ --text-sub: #5d596c; /* secondary text */ --text-muted: #7c7788; /* faintest meta text + placeholders */ --on-accent: #ffffff; /* text/icon sitting ON an accent fill (THEME-DEPENDENT — dark ink in dark theme) */ /* ── Borders ── */ --border: #e4e2ef; /* default hairline divider */ --border-strong: #d5d2e4; /* hover / input / modal-edge / toggle-track border */ /* ── Accent (brand purple — merges old #7c5cff shell + #df5ff5 studio) ── */ --accent: #8b3ff2; /* buttons, active states, links, focus */ --accent-ink: #6d28d9; /* readable accent TEXT on a soft-accent surface */ --accent-hover: #7a30dd; /* accent button HOVER fill */ --accent-soft: #f1e9fe; /* tinted accent fill (chips, hover bg, focus ring, active seg) */ --accent-border: #d9c4fb; /* accent-tinted border */ /* ── Status ── */ --ok: #15a34a; --ok-bg: #e6f6ec; --warn: #b8710c; --warn-bg: #fbf0d9; /* light warn darkened for contrast on white */ --err: #dd2350; --err-bg: #fce9ee; --info: #2563eb; --info-bg: #e6effd; /* the lone blue "photo" chip family */ /* ── Elevation (light = soft purple-tinted, not black) ── */ --raise: 0 1px 2px rgba(46,32,74,.05), 0 10px 26px rgba(46,32,74,.09); --raise-sm: 0 1px 2px rgba(46,32,74,.06), 0 3px 8px rgba(46,32,74,.08); /* ── Theme-INVARIANT (identical in both themes — sit over media or are structural) ── */ --scrim: rgba(0,0,0,.6); /* modal / lightbox backdrop */ --on-media: #ffffff; /* text/icons over photos & dark scrims */ --letterbox: #0a0a14; /* photo/video letterbox well behind media */ --scrollbar-thumb: rgba(0,0,0,.18); /* Editor timeline lane hues — color-coded, kept constant across themes. */ --lane-video: #5b8cff; --lane-overlay: #df5ff5; --lane-audio: #34d399; --lane-upload: #f5a623; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e0e15; --surface-card: #191922; --surface-panel: #1c1c26; /* a hair lighter than card so floating elements read above cards */ --surface-sidebar: #1c1c26; /* control rail — a subtle lift above the darker gallery ground */ --step-head: #26262f; --field: rgba(255,255,255,.045); --fill-subtle: rgba(255,255,255,.03); --field-line: rgba(255,255,255,.10); --text: #f3f2f8; --text-sub: #afacbf; --text-muted: #8b8898; --on-accent: #1a0b28; /* dark ink — the dark-theme accent is light, so text on it must be dark */ --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.16); --accent: #c98bf5; --accent-ink: #e7d3fb; --accent-hover: #d7a3f8; --accent-soft: rgba(201,139,245,.14); --accent-border: rgba(201,139,245,.4); --ok: #34d399; --ok-bg: rgba(16,185,129,.15); --warn: #fbbf24; --warn-bg: rgba(245,158,11,.15); --err: #fb7185; --err-bg: rgba(225,29,72,.16); --info: #63b3ed; --info-bg: rgba(99,179,237,.14); --raise: 0 2px 4px rgba(0,0,0,.32), 0 14px 32px rgba(0,0,0,.44); --raise-sm: 0 1px 3px rgba(0,0,0,.4); --scrim: rgba(0,0,0,.6); --scrollbar-thumb: rgba(255,255,255,.1); /* --on-media, --letterbox, --lane-* are invariant — inherited from :root. */ } /* ── Control-rail dark island (LIGHT MODE only) ────────────────────────────── The studio / booth / shell sidebar is a dark branded (purple) rail even in light mode: the white PortrAI logo (built for dark) reads correctly, the inactive control tiles + labels stay visible, and the bright accent buttons pop against it (the rail is a DARK purple, distinct from the accent so active buttons never blend in). In dark mode the rail already reads right from the base dark tokens, so this only applies when NOT dark. It redefines canonical tokens for the sidebar subtree; the legacy aliases (--card-bg / --text-main / --border-light / --panel / --line / --muted …) inherit these automatically. */ :root:not([data-theme="dark"]) #pg-app .pg-sidebar, :root:not([data-theme="dark"]) .vg-scope .vg-sidebar, :root:not([data-theme="dark"]) .side { color: #f5f3fc; /* inherited base text (the #pg-app / body color was resolved dark) */ scrollbar-color: rgba(255,255,255,.3) transparent; /* Firefox + modern-Chrome scrollbar on the dark rail */ /* canonical tokens */ --surface-sidebar: #2a2148; --surface-card: rgba(255,255,255,.09); --surface-panel: #2f2551; --field: rgba(255,255,255,.08); --field-line: rgba(255,255,255,.16); --fill-subtle: rgba(255,255,255,.08); --step-head: rgba(255,255,255,.06); --text: #f5f3fc; --text-sub: #cfc9e4; --text-muted: #a49ec0; --border: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.24); --accent-soft: rgba(160,110,246,.30); --accent-border: rgba(160,110,246,.55); --accent-ink: #dcc9fb; --scrollbar-thumb: rgba(255,255,255,.18); /* status chips on the dark rail: translucent bg + brightened fg so the island's light text (#f5f3fc) reads. Base light values (#e6f6ec etc.) are pale solids that would give light-on-light here (the .bs-ready guidance boxes). */ --ok: #4ade80; --ok-bg: rgba(74,222,128,.16); --warn: #fbbf24; --warn-bg: rgba(251,191,36,.16); --err: #fb7185; --err-bg: rgba(251,113,133,.16); --info: #93c5fd; --info-bg: rgba(147,197,253,.16); /* pg alias layer — resolved at #pg-app, so must be re-set here to be reached */ --card-bg: rgba(255,255,255,.09); --border-light: rgba(255,255,255,.14); --border-mid: rgba(255,255,255,.24); --text-main: #f5f3fc; --accent-glow: rgba(160,110,246,.30); /* admin-shell alias layer — for the SPA .side */ --panel: rgba(255,255,255,.09); --panel-2: #2f2551; --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.24); --muted: #cfc9e4; --faint: #a49ec0; --accent-2: #dcc9fb; --accent-bord: rgba(160,110,246,.55); } /* Smooth the flip between themes (but never fight reduced-motion). */ @media (prefers-reduced-motion: no-preference) { body { transition: background-color .25s ease, color .25s ease; } }