/* ===================================================================== tokens.css — SINGLE SOURCE OF TRUTH for design tokens. Linked BEFORE every page's own stylesheet. The light-theme :root block and the .theme-dark override live here ONLY (previously copy-pasted into styles.css / landing.css / funnel.css / settings.css). New reading/accessibility tokens are parameterized so the Reading & Accessibility panel (js/a11y.js) can bind settings to them at runtime. ===================================================================== */ :root{ /* --- surfaces / ink --- */ --paper:#eef0f4; --panel:#ffffff; --panel-2:#f7f8fb; --ink:#15171e; --muted:#5a606c; --faint:#6b7280; /* darkened from #8b909c → ≥4.5:1 on paper & panel (WCAG 1.4.3) */ --line:#dce0e7; --line-2:#e8ebf0; --accent:#3d3ae0; /* the live / draggable indigo */ --accent-soft:#ecebfb; --accent-ink:#2a27b8; --curve2:#e5604d; /* secondary curve / secant */ --ml:#9a5b00; /* ML through-line */ --ml-bg:#fbf1df; --ml-line:#ecd9b4; --good:#12835d; --good-bg:#e4f4ee; --bad:#c23b3b; --bad-line:#f0dcdc; /* --- shape / layout --- */ --radius:14px; --radius-s:9px; --maxw:760px; --sidew:300px; --topbarh:58px; /* --- font families --- */ --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; /* --- dark-only extras default to light equivalents (light theme unaffected) --- */ --seg-on:#ffffff; --seg-on-ink:#15171e; --seg-on-shadow:0 1px 3px rgba(20,22,30,.14); --cta-bg:var(--accent); --cta-ink:#ffffff; --glyph-bg:var(--ink); --glyph-ink:#ffffff; /* --- READING & ACCESSIBILITY tokens (defaults reproduce the current look) --- */ --font-reading:var(--serif); /* prose font — a dyslexia setting repoints this */ --font-ui:var(--sans); --fs-base:1.125rem; /* 18px prose at 16px root */ --fs-scale:1; /* settings multiplier 0.9–1.6 */ --leading:1.62; --leading-tight:1.2; --tracking:0; --word-spacing:normal; --measure:760px; /* reading column width; alias of the legacy --maxw */ --para-gap:1em; } /* ---------- DARK THEME (class on ) ---------- */ /* README dark-theme table: bg/panel/chip/ink/muted/faint/line/accent/… */ .theme-dark{ --paper:#0c0d12; --panel:#16181f; --panel-2:#1f222b; /* chip */ --ink:#f2f3f7; --muted:#9aa0ad; --faint:#9aa0ad; /* lightened for contrast on dark surfaces */ --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.07); --accent:#8b88ff; /* brightened indigo */ --accent-soft:rgba(139,136,255,0.20); --accent-ink:#bcbaff; --good:#3ecf8e; --good-bg:rgba(62,207,142,0.14); --bad:#f08a8a; --bad-line:rgba(240,138,138,0.22); --ml:#e0a352; --ml-bg:rgba(224,163,82,0.13); --ml-line:rgba(224,163,82,0.25); --seg-on:#2a2e39; /* seg-active bg */ --seg-on-ink:#f2f3f7; --seg-on-shadow:0 1px 3px rgba(0,0,0,.35); --cta-bg:#6f6cf5; /* cta bg */ --cta-ink:#ffffff; --glyph-bg:#f2f3f7; --glyph-ink:#0c0d12; } /* ===================================================================== COLOR THEMES (palette class on , layered with .theme-dark). Default = indigo (the :root / .theme-dark above). Adding .theme-claude or .theme-codex repaints the palette; combining with .theme-dark gives that palette's dark variant. Only color tokens are overridden. ===================================================================== */ /* ---------- CLAUDE (warm cream + terracotta) ---------- */ .theme-claude{ --paper:#f2f0e9; --panel:#fffefb; --panel-2:#f6f4ec; --ink:#1a1915; --muted:#6b6960; --faint:#757368; --line:#e6e3d8; --line-2:#efece4; --accent:#c2603f; /* clay / terracotta */ --accent-soft:#f4e6df; --accent-ink:#9c4a2e; --curve2:#5b82a8; /* slate-blue secondary */ --ml:#9a6b1f; --ml-bg:#f6ecd8; --ml-line:#e7d6b3; --good:#4e7c53; --good-bg:#e6f0e6; --bad:#b23a3a; --bad-line:#f0dcdc; --cta-bg:var(--accent); --glyph-bg:var(--ink); } .theme-claude.theme-dark{ --paper:#262624; --panel:#313130; --panel-2:#3b3b39; --ink:#f0eee6; --muted:#aba99e; --faint:#aba99e; --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.07); --accent:#e08a6a; /* brighter clay on dark */ --accent-soft:rgba(224,138,106,0.20); --accent-ink:#eba589; --curve2:#7ea7d0; --good:#5fb07a; --good-bg:rgba(95,176,122,0.14); --bad:#e89090; --bad-line:rgba(232,144,144,0.22); --ml:#dda45e; --ml-bg:rgba(221,164,94,0.13); --ml-line:rgba(221,164,94,0.25); --seg-on:#3e3e3c; --seg-on-ink:#f0eee6; --cta-bg:#d97757; --cta-ink:#ffffff; --glyph-bg:#f0eee6; --glyph-ink:#262624; } /* ---------- CODEX (minimal mono + OpenAI green) ---------- */ .theme-codex{ --paper:#f7f7f8; --panel:#ffffff; --panel-2:#f0f0f2; --ink:#0d0d0d; --muted:#565869; --faint:#6e6e80; --line:#e3e3e6; --line-2:#efeff1; --accent:#0e9e78; /* OpenAI teal-green */ --accent-soft:#e1f3ee; --accent-ink:#0a7a5c; --curve2:#565869; /* graphite secondary */ --ml:#8a6d2b; --ml-bg:#f5edda; --ml-line:#e7d6b3; --good:#0e9e78; --good-bg:#e1f3ee; --bad:#c23b3b; --bad-line:#f0dcdc; --cta-bg:var(--accent); --glyph-bg:var(--ink); } .theme-codex.theme-dark{ --paper:#0d0d0d; --panel:#1a1a1a; --panel-2:#262626; --ink:#ececec; --muted:#9b9ba3; --faint:#9b9ba3; --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.06); --accent:#19c37d; /* bright OpenAI green on dark */ --accent-soft:rgba(25,195,125,0.16); --accent-ink:#4dd89b; --curve2:#9b9ba3; --good:#19c37d; --good-bg:rgba(25,195,125,0.14); --bad:#f08a8a; --bad-line:rgba(240,138,138,0.22); --ml:#d8a75a; --ml-bg:rgba(216,167,90,0.13); --ml-line:rgba(216,167,90,0.25); --seg-on:#2a2a2a; --seg-on-ink:#ececec; --cta-bg:#19c37d; --cta-ink:#06281d; --glyph-bg:#ececec; --glyph-ink:#0d0d0d; } /* ---------- GLOBAL A11Y UTILITIES ---------- */ /* visually-hidden but available to assistive tech */ .sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* visible keyboard focus everywhere (WCAG 2.4.7) */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}