/* * Shared design tokens for the evq-sections plugin's own UI (table, filters, * details panel, visit sub-table, fullmap page) — light by default, with an * OS-driven dark variant and a manual override. Scoped to this plugin's own * component classes only; the surrounding WordPress theme is unaffected. * * Loaded as a dependency wherever any evq-sections stylesheet loads (see * EVQ_Sections_Shortcode / EVQ_Sections_Fullmap) so every surface — including * the standalone fullmap page, which previously only got these via * section-details.css's var() fallbacks when loaded alone — shares one * definition. * * The `[data-evq-theme]` attribute is set on by * assets/js/evq-sections-theme-toggle.js (localStorage override); the * `prefers-color-scheme` media query is the fallback for visitors who haven't * made an explicit choice. */ :root { --evq-radius: 10px; --evq-border: #e5e7eb; --evq-text: #1f2430; --evq-muted: #6b7280; --evq-accent: #1B4C96; --evq-accent-hover: #163c78; --evq-row-hover: #f7f9fc; --evq-bg: #ffffff; --evq-bg-subtle: #fafbfc; --evq-bg-page: #ffffff; --evq-shadow: rgba( 0, 0, 0, 0.12 ); /* Expanded river group sub-rows (public-table.js/.css) — deliberately its own value, not reused from --evq-row-hover (would cancel the row hover effect) or --evq-bg-subtle (would look identical to the group header). */ --evq-subrow-bg: #f2f4f8; --evq-tag-green-bg: #e6f4ea; --evq-tag-green-fg: #1e7b34; --evq-tag-red-bg: #fdecea; --evq-tag-red-fg: #c62828; --evq-tag-blue-bg: #e8f0fe; --evq-tag-blue-fg: #1a56db; --evq-tag-orange-bg: #fff1e0; --evq-tag-orange-fg: #b75b00; --evq-tag-amber-bg: #fff8e1; --evq-tag-amber-fg: #9a6700; --evq-tag-teal-bg: #e0f7f5; --evq-tag-teal-fg: #0f766e; --evq-tag-brown-bg: #f3e9e1; --evq-tag-brown-fg: #7c4a25; --evq-tag-neutral-bg: #f1f2f4; --evq-tag-neutral-fg: #4b5563; /* Région touristique pill (.evq-tag-region, public-table.css): saturation/ lightness for its hsl( hue, s, l ) formula — hue itself varies per region (set inline by EVQ_Sections_Tags::region_tag()), these two pairs don't. */ --evq-region-bg-s: 58%; --evq-region-bg-l: 93%; --evq-region-fg-s: 55%; --evq-region-fg-l: 32%; } @media ( prefers-color-scheme: dark ) { :root { --evq-border: #33383f; --evq-text: #e8eaed; --evq-muted: #9aa1ac; --evq-accent: #6b9bff; --evq-accent-hover: #86adff; --evq-row-hover: #23262b; --evq-bg: #1a1d21; --evq-bg-subtle: #202327; --evq-bg-page: #16181b; --evq-shadow: rgba( 0, 0, 0, 0.5 ); --evq-subrow-bg: #1f2329; --evq-tag-green-bg: #163a24; --evq-tag-green-fg: #6fd897; --evq-tag-red-bg: #3a1c1c; --evq-tag-red-fg: #ff8a80; --evq-tag-blue-bg: #1c2b47; --evq-tag-blue-fg: #8ab4ff; --evq-tag-orange-bg: #3a2a12; --evq-tag-orange-fg: #ffb74d; --evq-tag-amber-bg: #3a3012; --evq-tag-amber-fg: #ffd54f; --evq-tag-teal-bg: #123430; --evq-tag-teal-fg: #4fd8cb; --evq-tag-brown-bg: #2e2018; --evq-tag-brown-fg: #d7a97e; --evq-tag-neutral-bg: #2a2d31; --evq-tag-neutral-fg: #c3c8d1; --evq-region-bg-s: 38%; --evq-region-bg-l: 19%; --evq-region-fg-s: 65%; --evq-region-fg-l: 74%; } } /* Manual override always wins over the OS preference — source-ordered last. */ :root[data-evq-theme="dark"] { --evq-border: #33383f; --evq-text: #e8eaed; --evq-muted: #9aa1ac; --evq-accent: #6b9bff; --evq-accent-hover: #86adff; --evq-row-hover: #23262b; --evq-bg: #1a1d21; --evq-bg-subtle: #202327; --evq-bg-page: #16181b; --evq-shadow: rgba( 0, 0, 0, 0.5 ); --evq-subrow-bg: #1f2329; --evq-tag-green-bg: #163a24; --evq-tag-green-fg: #6fd897; --evq-tag-red-bg: #3a1c1c; --evq-tag-red-fg: #ff8a80; --evq-tag-blue-bg: #1c2b47; --evq-tag-blue-fg: #8ab4ff; --evq-tag-orange-bg: #3a2a12; --evq-tag-orange-fg: #ffb74d; --evq-tag-amber-bg: #3a3012; --evq-tag-amber-fg: #ffd54f; --evq-tag-teal-bg: #123430; --evq-tag-teal-fg: #4fd8cb; --evq-tag-brown-bg: #2e2018; --evq-tag-brown-fg: #d7a97e; --evq-tag-neutral-bg: #2a2d31; --evq-tag-neutral-fg: #c3c8d1; --evq-region-bg-s: 38%; --evq-region-bg-l: 19%; --evq-region-fg-s: 65%; --evq-region-fg-l: 74%; } :root[data-evq-theme="light"] { --evq-border: #e5e7eb; --evq-text: #1f2430; --evq-muted: #6b7280; --evq-accent: #1B4C96; --evq-accent-hover: #163c78; --evq-row-hover: #f7f9fc; --evq-bg: #ffffff; --evq-bg-subtle: #fafbfc; --evq-bg-page: #ffffff; --evq-shadow: rgba( 0, 0, 0, 0.12 ); /* Expanded river group sub-rows (public-table.js/.css) — deliberately its own value, not reused from --evq-row-hover (would cancel the row hover effect) or --evq-bg-subtle (would look identical to the group header). */ --evq-subrow-bg: #f2f4f8; --evq-tag-green-bg: #e6f4ea; --evq-tag-green-fg: #1e7b34; --evq-tag-red-bg: #fdecea; --evq-tag-red-fg: #c62828; --evq-tag-blue-bg: #e8f0fe; --evq-tag-blue-fg: #1a56db; --evq-tag-orange-bg: #fff1e0; --evq-tag-orange-fg: #b75b00; --evq-tag-amber-bg: #fff8e1; --evq-tag-amber-fg: #9a6700; --evq-tag-teal-bg: #e0f7f5; --evq-tag-teal-fg: #0f766e; --evq-tag-brown-bg: #f3e9e1; --evq-tag-brown-fg: #7c4a25; --evq-tag-neutral-bg: #f1f2f4; --evq-tag-neutral-fg: #4b5563; --evq-region-bg-s: 58%; --evq-region-bg-l: 93%; --evq-region-fg-s: 55%; --evq-region-fg-l: 32%; }