/* * Shared color palettes for the demo templates. * Linked from every layout (index.html, sidebar.html, …) so a color change * happens in one place for all structures. * * A palette only redefines the accent variables; the rest of the page * (backgrounds, text, the dark contact section) is identical across colorways * — exactly like the Claude Design variants, which differ only by accent. * * Apply by putting a class on , e.g. . * main.js sets this from the therapist's `theme` field (or a ?theme= param). */ :root, .theme-base { --accent: #6b8a99; --accent-dark: #54707e; --accent-soft: rgba(107, 138, 153, .12); --accent-line: rgba(107, 138, 153, .30); } .theme-sienna { --accent: #a6663f; --accent-dark: #8a5232; --accent-soft: rgba(166, 102, 63, .12); --accent-line: rgba(166, 102, 63, .30); } .theme-mgla { --accent: #4f8a86; --accent-dark: #3d6f6b; --accent-soft: rgba(79, 138, 134, .12); --accent-line: rgba(79, 138, 134, .30); } .theme-atrament { --accent: #3f5d8a; --accent-dark: #324a6f; --accent-soft: rgba(63, 93, 138, .12); --accent-line: rgba(63, 93, 138, .30); }