/* =========================================================================== Dailies · Sub-brand theme · the strayed ground --------------------------------------------------------------------------- Two interchangeable grounds, switched by [data-theme] on : • default / data-theme="slate" → Dailies SLATE (current). • data-theme="void" → the original Cinematic Void (old backup). Only the *ground* tokens move; gold accent, grain, type, borders, shadows and motion are inherited untouched from bsp-tokens.css. The experiments menu (experiments.js) flips data-theme and persists the choice. Load order matters: link this AFTER bsp-tokens.css and BEFORE the page-specific stylesheet so these overrides win the cascade. =========================================================================== */ :root { /* ---- Dailies slate scale (the strayed base) -------------------------- */ --da-slate-sink: #0B1015; /* sunk below ground — wells, deepest gradients */ --da-slate-deep: #131A20; /* the ground — page background */ --da-slate: #1E2A33; /* raised surface — cards, rails, panels */ --da-slate-soft: #283740; /* most-raised — chips, hovers */ /* ---- Cinematic Void scale (the old ground — kept as a backup) -------- */ --da-void-sink: #061518; /* deepest teal-black */ --da-void-deep: #0A272C; /* the teal ground — page background */ --da-void: #103138; /* raised teal surface */ /* ---- stray the Golden Hour ground tokens onto slate ------------------ */ /* canonical Void tokens */ --bsp-void: var(--da-slate-deep); --bsp-void-deep: var(--da-slate-sink); --bsp-void-soft: var(--da-slate); /* legacy aliases the product CSS actually references */ --bsp-navy: var(--da-slate-deep); --bsp-navy-light: var(--da-slate); --bsp-navy-rgb: 19, 26, 32; /* ground channels for rgba() scrims & header fades */ /* semantic background tokens (were derived from the Void) */ --bsp-bg: var(--da-slate-deep); --bsp-bg-deep: var(--da-slate-sink); --bsp-bg-elev: var(--da-slate); /* text that sits ON the gold accent → slate, not teal */ --bsp-accent-on: var(--da-slate); /* ---- shared layout system (consistent widths across every surface) ---- */ --app-max: 1440px; /* shared max width for every surface */ --gutter: clamp(20px, 3vw, 36px); /* shared side gutter */ } /* --------------------------------------------------------------------------- Old ground — Cinematic Void. Re-points the same ground tokens back to the teal Void so the whole product reverts in one place. Higher specificity than the :root slate defaults above, so it wins only when data-theme="void". =========================================================================== */ :root[data-theme="void"] { --bsp-void: var(--da-void-deep); --bsp-void-deep: var(--da-void-sink); --bsp-void-soft: var(--da-void); --bsp-navy: var(--da-void-deep); --bsp-navy-light: var(--da-void); --bsp-navy-rgb: 10, 39, 44; --bsp-bg: var(--da-void-deep); --bsp-bg-deep: var(--da-void-sink); --bsp-bg-elev: var(--da-void); --bsp-accent-on: var(--da-void-deep); } /* --------------------------------------------------------------------------- Shared shell fix. On every surface the React app mounts at .stage > #root > . #root is a flex child of the centering .stage but has no width, so it shrink-wraps to its content — which silently kills each surface's max-width cap and makes the rendered width accidental. Pin #root to the full stage width and center the single app root within it, so the per-surface --app-max cap actually binds. =========================================================================== */ #root { width: 100%; } #root > * { margin-inline: auto; }