/* ═══════════════════════════════════════════════════════════════ INTERACTINK — design tokens Restyled to match the Twitter-clone reference: white app shell, sticky icon/label sidebar, bordered center column, green accent, rounded-full controls, rose "like" color. Variable NAMES kept stable (lots of rules reference them) — only the values changed, so nothing downstream breaks. ═══════════════════════════════════════════════════════════════ */ /* ── CROSS-PAGE VIEW TRANSITIONS — this app is plain multi-page HTML (no SPA router), so every internal link is a real full navigation. This one rule asks supporting browsers (Chrome/Edge 126+) to cross-fade between the old and new page instead of the default hard flash-to-white, which is most of what makes an MPA "feel" like an SPA. Free progressive enhancement — browsers without support just keep the normal instant navigation, nothing else changes. ── */ @view-transition { navigation: auto; } :root { --bg: #FFFFFF; /* page background */ --ink: #0F1419; /* twitter gray-900 text */ /* --maroon/--mustard/--link are the app's one accent color (green by default). Light-mode value is green-700 #15803D, which clears 4.5:1 on white (5.31:1); dark/dim mode override below uses the brighter green-600 #16A34A, since against a near-black background that reads at a strong 5.7–7.3:1 while staying visually lighter/ more legible than the green-700 shade would there. */ --maroon: #15803D; /* accent — green-700 (AA on white) */ --maroon-dk: #166534; /* accent hover/active — green-800 */ --maroon-tint: rgba(21,128,61,.10); /* accent hover wash */ --mustard: #15803D; /* secondary accent, kept same as maroon for one accent color */ --mustard-dk:#166534; --cream-card:#FFFFFF; /* card background */ --line: #EFF3F4; /* hairline border — gray-100 */ --muted: #536471; /* secondary text — twitter gray-500 */ --green: #00BA7C; /* greentext */ --link: #15803D; --vis: #7C3AED; /* --like was rose-500 #F43F5E, 3.67:1 on white — also below AA. Darkened to rose-600 (4.7:1); dark/dim mode restores the brighter rose-500 below for the same reason as --maroon above. */ --like: #E11D48; /* rose-600 (AA on white) */ --like-tint: rgba(225,29,72,.10); --hover-bg: #F7F9F9; /* row hover wash */ --div: #EFF3F4; /* used by a couple of inline hr styles */ --input-bg: #FFFFFF; /* form field / card-on-card background */ --border-input: #CFD9DE; /* form field / outline-button border */ --translucent-bg: rgba(255,255,255,.85); /* sticky/backdrop-blur headers */ --r-sm: 8px; --r-md: 16px; --r-lg: 20px; --shadow-card: none; --shadow-card-hov: none; --shadow-pop: 0 12px 32px rgba(15,20,25,.18), 0 2px 8px rgba(15,20,25,.08); color-scheme: light; /* tells the browser to render native form controls (select dropdowns, date/time pickers, scrollbars) in a light palette — overridden to `dark` below for Dim/Lights out, otherwise those browser-native bits ignore our theme entirely and can render with black-on-dark text. */ } /* ── THEMES — "Default" (light) is the :root above; Dim and Lights out (dark) are opted into via data-theme on , set by settings.js (chooseTheme()) and persisted to localStorage, applied pre-paint by a tiny inline script in every page's to avoid a flash. Accent (--maroon/--link) and --like revert to their original, brighter values here — against these near-black surfaces the brighter shades read at 5.9–7.6:1, better than the light-mode-safe darker shades would (which drop to ~2.8–4.5:1 on dark backgrounds). --green stays constant across themes, same as X's greentext does. ── */ html[data-theme="dim"] { --bg:#15202B; --ink:#F7F9F9; --cream-card:#15202B; --line:#38444D; --muted:#8B98A5; --hover-bg:#1E2732; --input-bg:#1E2732; --div:#38444D; --border-input:#38444D; --translucent-bg:rgba(21,32,43,.85); --maroon:#16A34A; --maroon-dk:#22C55E; --mustard:#16A34A; --mustard-dk:#22C55E; --link:#16A34A; --like:#F43F5E; --maroon-tint: rgba(22,163,74,.16); --like-tint: rgba(244,63,94,.16); color-scheme: dark; } html[data-theme="dark"] { --bg:#000000; --ink:#E7E9EA; --cream-card:#000000; --line:#2F3336; --muted:#71767B; --hover-bg:#0B0B0B; --input-bg:#000000; --div:#2F3336; --border-input:#2F3336; --translucent-bg:rgba(0,0,0,.85); --maroon:#16A34A; --maroon-dk:#22C55E; --mustard:#16A34A; --mustard-dk:#22C55E; --link:#16A34A; --like:#F43F5E; --maroon-tint: rgba(22,163,74,.16); --like-tint: rgba(244,63,94,.16); color-scheme: dark; } /* ── ACCENT COLOR — Settings → Appearance lets people swap the app's one accent color (buttons, links, active states — everything that reads var(--maroon)/var(--mustard)/var(--link)) between 5 options. Applied via data-accent on , set by settings.js (chooseAccent()) and persisted to localStorage, applied pre-paint by the same inline script that handles the theme, to avoid a flash. "Green" is the default and needs no override — it's just the :root values above. Light-mode values below are darkened from the original palette so every accent clears 4.5:1 on a white background (green and orange were previously 3.3:1 and 2.8:1 — both failed AA); the dark/dim overrides beneath restore the original, brighter shades since those already had strong contrast against near-black surfaces. */ html[data-accent="red"] { --maroon:#DC2626; --maroon-dk:#B91C1C; --maroon-tint:rgba(220,38,38,.10); --mustard:#DC2626; --mustard-dk:#B91C1C; --link:#DC2626; } html[data-accent="blue"] { --maroon:#0369A1; --maroon-dk:#075985; --maroon-tint:rgba(3,105,161,.10); --mustard:#0369A1; --mustard-dk:#075985; --link:#0369A1; } html[data-accent="purple"] { --maroon:#7C3AED; --maroon-dk:#6D28D9; --maroon-tint:rgba(124,58,237,.10); --mustard:#7C3AED; --mustard-dk:#6D28D9; --link:#7C3AED; } html[data-accent="orange"] { --maroon:#C2410C; --maroon-dk:#9A3412; --maroon-tint:rgba(194,65,12,.10); --mustard:#C2410C; --mustard-dk:#9A3412; --link:#C2410C; } html[data-theme="dim"][data-accent="red"], html[data-theme="dark"][data-accent="red"] { --maroon-tint:rgba(220,38,38,.16); } html[data-theme="dim"][data-accent="blue"], html[data-theme="dark"][data-accent="blue"] { --maroon:#0EA5E9; --maroon-dk:#38BDF8; --mustard:#0EA5E9; --mustard-dk:#38BDF8; --link:#0EA5E9; --maroon-tint:rgba(14,165,233,.16); } html[data-theme="dim"][data-accent="purple"],html[data-theme="dark"][data-accent="purple"]{ --maroon-tint:rgba(124,58,237,.16); } html[data-theme="dim"][data-accent="orange"],html[data-theme="dark"][data-accent="orange"]{ --maroon:#F97316; --maroon-dk:#FB923C; --mustard:#F97316; --mustard-dk:#FB923C; --link:#F97316; --maroon-tint:rgba(249,115,22,.16); } * { margin:0; padding:0; box-sizing:border-box; } /* ── KILL THE MOBILE TAP-HIGHLIGHT FLASH — Safari/Chrome on mobile paint their own translucent blue/gray rectangle over whatever you tap (any ,