/* ============================================================ DotSense Fraction Suite theme Loaded AFTER dotsense.css on fraction tool pages, activated by data-suite="fractions" on . Same Nunito, same dark base, same components — only the accent variables change, so every chip, slider, button and hover state re-skins automatically and the shared routine engine needs zero changes. Palette: · amber #F4A93C — primary accent (active states, markers) · plum #9B5DE5 — secondary accent (second voice in models) · teal #4ECDC4 — through-line color shared with the number-sense suite (benchmarks, connections) ============================================================ */ [data-suite="fractions"][data-theme="dark"] { /* --teal drives every active/hover state in the shared CSS, so pointing it at amber re-accents the whole UI */ --teal:#F4A93C; --active-bg:#F4A93C; --active-fg:#1B2340; --yellow:#FFD166; /* named accents for canvas drawing */ --amber:#F4A93C; --plum:#9B5DE5; --fr-teal:#4ECDC4; } [data-suite="fractions"][data-theme="light"] { /* parchment base, deep plum + burnt amber for AA contrast */ --bg:#FBF6EF; --surface:#F3ECDD; --border:#DFD3BC; --text:#2b2233; --muted:#84775f; --stage-bg:#F3ECDD; --active-bg:#B45309; --active-fg:#ffffff; --next-bg:#DFD3BC; --next-fg:#2b2233; --die-face:#EFE5D2; --teal:#B45309; --coral:#c1121f; --yellow:#B45309; --amber:#B45309; --plum:#6D28D9; --fr-teal:#2d6a4f; } /* the plum takes over the Flash button as the suite's "go" color */ [data-suite="fractions"] .btn-flash { background:var(--plum); color:#fff; } /* .tool-explainer styling lives in dotsense.css so both suites share it */