/* ═══════════════════════════════════════════════════════════════════════ StreamCards — shared design tokens (Revision 6.3, 2026-10-04) Consumed by admin/admin.css, collection/index.html and home/index.html. The overlay (overlay/index.html) and the Three.js card renderer are NOT themed: cards look the same in both themes, the OBS source stays as is. Theme selection → dark (default; no attribute needed) → dark → light Each page sets the attribute from localStorage key "sc-theme" in an inline script BEFORE this stylesheet is applied, so there is no flash. The attribute selector below outranks the bare :root block, so the light block wins whenever data-theme="light" is present. Variable names are the ones admin/admin.css has used since the split (--bg … --radius-lg). The collection page's older names (--bg-surface, --bg-panel, --bg-hover) are kept as ALIASES so its selectors need no rename. Tokens added for 6.3 (--on-accent, --accent-soft, --*-ring, --*-bg, --scrim, --shadow) replace the raw rgba()/#fff literals the three pages used for page chrome. Contrast (WCAG 2.x, computed 2026-10-04): DARK (unchanged current palette) --text on --bg 15.4 : 1 --text-dim on --bg 5.8 : 1 --text-faint on --bg 2.9 : 1 (labels only: 10–11 px uppercase) --accent on --bg 4.9 : 1 white on --accent 4.0 : 1 LIGHT --text on --bg 10.9 : 1 --text-dim on --bg 5.1 : 1 --text-dim on --surface-3 4.4 : 1 (inputs/pills: 12–13 px, 600 weight) --text-faint on --bg 3.3 : 1 (labels only, same role as dark) --accent on --bg 4.7 : 1 white on --accent 5.4 : 1 --accent-dim on --bg 6.2 : 1 white on --accent-dim 7.1 : 1 --danger on --bg 4.6 : 1 white on --danger 5.3 : 1 --success on --bg 5.2 : 1 white on --success 6.0 : 1 --warning on --bg 4.5 : 1 white on --warning 5.1 : 1 The builder's suggested lavender #8b6fe0 reads at 3.4 : 1 on the sand background, so it is kept as --accent-soft for DECORATIVE use only (rings, glows, tints via --accent-bg) and the text/fill accent is the darker --accent #7257c9. Likewise the pastel danger/success/warning suggestions (#d9686a / #5aa97a / #d9a441) survive as the *-bg tints; the solid tokens are deepened until white-on-fill and text-on-bg both clear 4.5 : 1. --text-faint is below 4.5 : 1 in BOTH themes by design: it is used only for section labels and footnotes, never body copy. ═══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #0c0c10; --surface: #141418; --surface-2: #1a1a20; --surface-3: #222228; --border: #2a2a32; --border-light: #35353f; /* Text */ --text: #e4e4e8; --text-dim: #8b8b96; --text-faint: #5a5a66; /* Accent */ --accent: #a855f7; --accent-dim: #7c3aed; --accent-soft: #a855f7; --accent-bg: rgba(168,85,247,0.08); --accent-ring: rgba(168,85,247,0.35); --on-accent: #ffffff; /* Status */ --danger: #ef4444; --danger-bg: rgba(239,68,68,0.08); --danger-ring: rgba(239,68,68,0.3); --success: #22c55e; --success-bg: rgba(34,197,94,0.1); --success-ring: rgba(34,197,94,0.35); --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.12); --warning-ring: rgba(245,158,11,0.45); --on-warning: #1a1200; /* Shape */ --radius: 8px; --radius-lg: 12px; /* transparency checkerboard (overlay preview): 18px squares, same in both themes */ --checker-a: #c0c0c0; --checker-b: #ffffff; /* Chrome */ --scrim: rgba(0,0,0,0.85); --shadow: 0 4px 20px rgba(0,0,0,0.3); /* Aliases — collection/index.html's pre-6.3 names */ --bg-surface: var(--surface); --bg-panel: var(--surface-2); --bg-hover: var(--surface-3); } :root[data-theme="light"] { color-scheme: light; /* Surfaces — soft tans and sands */ --bg: #f6efe6; --surface: #fbf7f2; --surface-2: #f1e8dc; --surface-3: #e9dfd1; --border: #e2d6c6; --border-light: #d8cab8; /* Text — warm charcoal */ --text: #3b332c; --text-dim: #6f6357; --text-faint: #8f8276; /* Accent — lavender */ --accent: #7257c9; --accent-dim: #5e46b0; --accent-soft: #8b6fe0; --accent-bg: rgba(139,111,224,0.12); --accent-ring: rgba(139,111,224,0.45); --on-accent: #ffffff; /* Status — pastel tints, solid tokens deepened for contrast */ --danger: #b8454c; --danger-bg: rgba(217,104,106,0.12); --danger-ring: rgba(217,104,106,0.45); --success: #2a7049; --success-bg: rgba(90,169,122,0.14); --success-ring: rgba(90,169,122,0.5); --warning: #8f6713; --warning-bg: rgba(217,164,65,0.16); --warning-ring: rgba(217,164,65,0.55); --on-warning: #ffffff; /* Shape (unchanged) */ --radius: 8px; --radius-lg: 12px; /* Chrome */ --scrim: rgba(59,51,44,0.72); --shadow: 0 4px 20px rgba(59,51,44,0.14); --bg-surface: var(--surface); --bg-panel: var(--surface-2); --bg-hover: var(--surface-3); } /* Theme toggle — one button, same markup on every page: The page's handler flips data-theme on , writes "sc-theme", and updates aria-label/title. The icons swap on the attribute alone. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; flex-shrink: 0; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--text); border-color: var(--border-light); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 15px; height: 15px; display: block; } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; }