/* xconversion design tokens — values taken verbatim from the design canvas * ('Xconversion App v2.dc.html'), with one deliberate change described below. * * Light is the default context; dark is opt-in via data-theme="dark". * --ink, --brand and --scrim are raw "R,G,B" triples, meant for use inside * rgba(). --brand is the same colour as --mine, in the form a tint needs: a * hex cannot be given an alpha, and "the brand at eight per cent" is the most * common thing anything branded on these screens actually wants. * * PORT NOTE — selector order and specificity differ from the canvas. * The canvas hung data-theme on a nested
, so plain [data-theme="dark"] * beat :root by depth. We set it on instead, where both selectors match * the same element at equal specificity (0,1,0) and source order decides — which * made dark silently unreachable. Light is therefore declared first, and dark is * qualified with :root to raise it to (0,2,0). The bare attribute selector is * kept alongside so a scoped subtree can still flip a region on its own. */ :root,[data-theme="light"]{--bg:#F1F1F5;--surface:#FFFFFF;--surface-2:#F6F6FA;--line:#E3E3EB;--ink:20,20,30;--brand:28,28,210;--text:#15151C;--peri:#4B4BE6;--amber:#A96C14;--green:#00806A;--bubble:#EDEDFB;--onbub:#212129;--mine:#1C1CD2;--onmine:#FFFFFF;--scrim:26,26,40;--rail:#14142B;--rail-ink:255,255,255;--rail-text:#FFFFFF;--rail-active:rgba(255,255,255,.13)} :root[data-theme="dark"],[data-theme="dark"]{--bg:#0D0D0D;--surface:#16161B;--surface-2:#1A1A21;--line:#27272F;--ink:255,255,255;--brand:143,143,247;--text:#FFFFFF;--peri:#8F8FF7;--amber:#E8A33D;--green:#00A886;--bubble:#EDEDFB;--onbub:#212129;--mine:#FFFFFF;--onmine:#212129;--scrim:4,4,7;--rail:#0D0D0D;--rail-ink:255,255,255;--rail-text:#FFFFFF;--rail-active:rgba(255,255,255,.09)}