/* Candidate colour schemes for stakeholder preview. Each theme only re-points the CSS variables site.css already runs on, so every page re-skins consistently. The picker (_ThemePicker, dev-only) sets data-theme on ; no attribute = the current indigo. Once a winner is chosen, its values fold into :root in site.css and this file goes away (or stays as the second-place option for a future per-surface accent). */ /* Saffron — marigold and warm cream. The colour of the tradition. */ [data-theme="saffron"] { --color-bg: #faf5ec; --color-surface: #fffdf8; --color-border: #ecdfc8; --color-text: #2d2417; --color-muted: #6b5d49; --color-text-muted: #6b5d49; --color-accent: #c2670a; --color-accent-light: #faeed9; --color-accent-hover: #a3560a; --color-accent-deep: #8a4a06; } /* Lotus — soft rose, dusk pink. Gentle and warm. */ [data-theme="lotus"] { --color-bg: #f9f4f7; --color-surface: #fffbfd; --color-border: #ecdce6; --color-text: #2b1f27; --color-muted: #6b5462; --color-text-muted: #6b5462; --color-accent: #b03a78; --color-accent-light: #f9e4ef; --color-accent-hover: #93305f; --color-accent-deep: #7a2a52; } /* Tulsi — sage and leaf green. Calm, plant-toned. */ [data-theme="tulsi"] { --color-bg: #f3f6f1; --color-surface: #fcfdfb; --color-border: #dde6d8; --color-text: #1f2a1e; --color-muted: #54624f; --color-text-muted: #54624f; --color-accent: #3a7d44; --color-accent-light: #e4f1e3; --color-accent-hover: #2f6a39; --color-accent-deep: #275a30; } /* Peacock — teal-blue of the feather. Cooler, crisp. */ [data-theme="peacock"] { --color-bg: #f0f6f7; --color-surface: #fbfeff; --color-border: #d8e6e8; --color-text: #15292d; --color-muted: #4c6469; --color-text-muted: #4c6469; --color-accent: #0e7490; --color-accent-light: #dff2f5; --color-accent-hover: #0b5e75; --color-accent-deep: #0a4f63; } /* Evening — warm dark for dim rooms (the centre runs evenings). This one is a real mode, not just a palette: users can choose it (or follow their device) from their settings, so every semantic tint is re-pointed too. */ [data-theme="evening"] { --color-bg: #1d1a17; --color-surface: #282321; --color-border: #3c352f; --color-text: #f0e9e1; --color-muted: #b3a695; --color-text-muted: #b3a695; --color-accent: #e08b2d; --color-accent-light: #3b3023; --color-accent-hover: #c97a22; --color-accent-deep: #f3b56b; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow: 0 4px 12px rgba(0,0,0,0.5); --tint-danger-bg: #3a2422; --tint-danger-border: #5f322d; --tint-danger-text: #f08c82; --tint-success-bg: #203025; --tint-success-border: #31503c; --tint-success-text: #84cf99; --tint-warning-bg: #332a18; --tint-warning-bg-strong: #3b3120; --tint-warning-border: #57451f; --tint-warning-text: #e5b766; --tint-note-bg: #34301c; --tint-note-text: #dcc56a; --tint-invited-bg: #2e2820; --tint-info-bg: #1e2a38; --tint-info-text: #85b8ea; --tint-today-bg: #382f1d; --color-accent-border: #5a4a2e; --color-accent-soft: #e08b2d; --color-bg-hover: #322c28; --color-bg-subtle: #2e2926; --color-surface-dim: #231f1c; --color-border-strong: #4a4138; --color-muted-soft: #9b8e7d; --color-muted-faint: #6e6357; }