/* Shared app theming. Loaded by every page (except loop.html/manage.html, which carry their own). Strategy: the app's native look is DARK, so we DON'T touch dark mode — pages keep their own :root palette. We only add a LIGHT palette, at higher specificity (:root[data-theme="light"] beats a page's :root), so toggling to light overrides the shared color tokens everywhere. theme.js stamps data-theme on from the saved preference or the OS setting. */ /* Default (dark) value for the sticky-nav backdrop token used by the pages after we tokenised their hardcoded rgba() navs. Overridden in the light block below. */ :root{ --nav-bg:rgba(9,9,11,0.8); } :root[data-theme="light"]{ --nav-bg:rgba(255,255,255,0.82); /* grounds & surfaces (both --surface-N and --sN naming conventions) */ --bg:#faf9fb; --surface-1:#ffffff; --surface-2:#f4f3f7; --surface-3:#ecebf2; --s1:#ffffff; --s2:#f4f3f7; --s3:#ecebf2; --card-color:#ffffff; /* ink */ --text:#17161f; --text-1:#17161f; --text-2:#4a4956; --text-3:#6b6a78; --muted:#5c5b69; --faint:#8a8896; /* brand (indigo, tuned for light grounds) */ --brand:#5b57e0; --brand-2:#6d6bd6; --accent:#5b57e0; --brand-light:#6d6bd6; --brand-dim:rgba(91,87,224,.10); --brand-glow:rgba(91,87,224,.22); /* borders */ --border:rgba(20,19,26,.12); --border-2:rgba(20,19,26,.12); --border-strong:rgba(20,19,26,.20); --border-hover:rgba(20,19,26,.30); /* semantic */ --good:#0e9b6a; --success:#0e9b6a; --ok:#0e9b6a; --green:#0e9b6a; --live:#0e9b6a; --partial:#b26a10; --warn:#b26a10; --warning:#b26a10; --amber:#b26a10; --star:#d99e00; --danger:#d92d20; --bad:#d92d20; /* the "owner surfaces" accent trio (roles kept, tuned for light) */ --owner-you:#5b57e0; --owner-agent:#0e9b6a; --owner-spec:#b26a10; /* shadows: soft, dark on light */ --shadow-sm:0 1px 2px rgba(20,19,26,.06); --shadow-md:0 2px 8px rgba(20,19,26,.08); --shadow-lg:0 12px 32px rgba(20,19,26,.12); --shadow:0 2px 8px rgba(20,19,26,.08); color-scheme:light; } :root[data-theme="dark"]{ color-scheme:dark; } /* Light-mode contrast fixes: elements that hardcode a LIGHT indigo text colour (readable on dark grounds, invisible on light) get a dark indigo in light mode. */ :root[data-theme="light"] .btn-brand{ color:#3a34b8; background:rgba(99,102,241,.10); border-color:rgba(99,102,241,.42); } :root[data-theme="light"] .btn-brand:hover{ color:#2b2694; background:rgba(99,102,241,.16); } :root[data-theme="light"] .seg button.on{ color:#3a34b8; } :root[data-theme="light"] .tier-strong{ color:#3a34b8; } :root[data-theme="light"] .k{ color:#4b46d6; } :root[data-theme="light"] .source-reply b{ color:#4b46d6; } /* Floating theme toggle injected by theme.js */ .agoria-theme-toggle{ position:fixed; right:16px; bottom:16px; z-index:9999; display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--surface-2,#161619); border:1px solid var(--border,rgba(255,255,255,.12)); box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.4)); font-family:var(--font,system-ui,sans-serif); } .agoria-theme-toggle button{ border:0; background:transparent; color:var(--faint,#8a8896); cursor:pointer; width:30px; height:26px; border-radius:999px; font-size:14px; line-height:1; transition:all .15s; } .agoria-theme-toggle button:hover{ color:var(--text,#fff); } .agoria-theme-toggle button.on{ background:var(--brand-dim,rgba(99,102,241,.18)); color:var(--brand,#818cf8); } @media print{ .agoria-theme-toggle{ display:none; } }