/* colors.css — THE Disciplineo palette. Edit colors ONLY here. HOW PALETTES WORK ───────────────── Every palette is always active in this file, addressed by [data-palette="name"]. JS (app.js on app pages, landing-init.js / login-init.js on public + auth pages) reads the visitor's saved choice from localStorage ("disciplineo-palette") and stamps it on before paint. The plain `:root` block below is the default for first visits and the no-JS fallback — keep it identical to one of the named palettes. The Settings page reuses these same blocks: each swatch button carries its own data-palette attribute, so the swatch colors come from here too — adding a palette block (plus its Settings swatch + i18n name) is all it takes to offer a new theme. Two colors also live in JS: the PWA (app.js, computed from --c-accent at runtime) and the Vision-Board default card color (visionBoard.js). */ /* ════════ DEFAULT — same values as TERRACOTTA below ════════ */ :root { --c-accent: #c97b5c; --c-accent-strong: #a85f43; --c-accent-soft: #d99b82; --c-accent-dk: #e0916e; --c-accent-dk-strong: #eaab8d; --c-success: #7f9270; --c-success-strong: #5f7350; --c-success-dk: #9db28d; --c-success-dk-strong: #b7c8a9; --c-gold: #d9a253; --c-gold-dk: #e6b972; --c-danger: #c1584a; --c-danger-deep: #b0442f; --c-danger-deep-dk: #e2917b; --c-paper: #f6f3ec; --c-paper-soft: #efe9dd; --c-card: #fffdf9; --c-card-max: #ffffff; --c-ink: #2e2a24; --c-ink-soft: #746c5c; --c-ink-faint: #948c78; --c-night: #221d17; --c-night-soft: #2a241c; --c-night-card: #2d261d; --c-night-card-2: #362e24; --c-night-card-hover: #3a3126; --c-cream: #fffaf2; --c-night-ink: #f4efe4; --c-night-ink-soft: #baaf98; --c-night-ink-faint: #948a72; --c-shadow-ink: #3a2d1e; --c-shadow-night: #000000; } /* ════════ PALETTE 1 — TERRACOTTA (warm terracotta, warm paper) ════════ */ [data-palette="terracotta"] { --c-accent: #c97b5c; --c-accent-strong: #a85f43; --c-accent-soft: #d99b82; --c-accent-dk: #e0916e; --c-accent-dk-strong: #eaab8d; --c-success: #7f9270; --c-success-strong: #5f7350; --c-success-dk: #9db28d; --c-success-dk-strong: #b7c8a9; --c-gold: #d9a253; --c-gold-dk: #e6b972; --c-danger: #c1584a; --c-danger-deep: #b0442f; --c-danger-deep-dk: #e2917b; --c-paper: #f6f3ec; --c-paper-soft: #efe9dd; --c-card: #fffdf9; --c-card-max: #ffffff; --c-ink: #2e2a24; --c-ink-soft: #746c5c; --c-ink-faint: #948c78; --c-night: #221d17; --c-night-soft: #2a241c; --c-night-card: #2d261d; --c-night-card-2: #362e24; --c-night-card-hover: #3a3126; --c-cream: #fffaf2; --c-night-ink: #f4efe4; --c-night-ink-soft: #baaf98; --c-night-ink-faint: #948a72; --c-shadow-ink: #3a2d1e; --c-shadow-night: #000000; } /* ════════ PALETTE 2 — OCEAN (steel blue, cool mist paper) ════════ */ [data-palette="ocean"] { --c-accent: #5f8fa8; --c-accent-strong: #47758f; --c-accent-soft: #8ab0c4; --c-accent-dk: #7fa9bf; --c-accent-dk-strong: #a3c4d6; --c-success: #6f9284; --c-success-strong: #4f7362; --c-success-dk: #92b3a5; --c-success-dk-strong: #aec9bd; --c-gold: #d0a35c; --c-gold-dk: #e0ba7a; --c-danger: #c05b52; --c-danger-deep: #a8443c; --c-danger-deep-dk: #e29288; --c-paper: #f2f4f4; --c-paper-soft: #e7ecec; --c-card: #fcfdfd; --c-card-max: #ffffff; --c-ink: #232a2e; --c-ink-soft: #5f6c72; --c-ink-faint: #86939a; --c-night: #161d21; --c-night-soft: #1c2429; --c-night-card: #202a30; --c-night-card-2: #2a353c; --c-night-card-hover: #2f3b43; --c-cream: #f4fafd; --c-night-ink: #e8f0f4; --c-night-ink-soft: #a4b4bd; --c-night-ink-faint: #7e8e97; --c-shadow-ink: #1e2e38; --c-shadow-night: #000000; } /* ════════ PALETTE 3 — FOREST (deep green, moss paper) ════════ */ [data-palette="forest"] { --c-accent: #4f7a5e; --c-accent-strong: #3c614a; --c-accent-soft: #7ba189; --c-accent-dk: #7fa98c; --c-accent-dk-strong: #9cc2a8; --c-success: #7f9455; --c-success-strong: #64773f; --c-success-dk: #a0b578; --c-success-dk-strong: #b8ca96; --c-gold: #d3a54f; --c-gold-dk: #e2bc72; --c-danger: #bf5b45; --c-danger-deep: #a3462f; --c-danger-deep-dk: #e19077; --c-paper: #f3f5ef; --c-paper-soft: #e8ece0; --c-card: #fcfdf9; --c-card-max: #ffffff; --c-ink: #262b23; --c-ink-soft: #67705c; --c-ink-faint: #8d9581; --c-night: #181d16; --c-night-soft: #1f251c; --c-night-card: #232a20; --c-night-card-2: #2d3529; --c-night-card-hover: #323b2e; --c-cream: #f8fcf2; --c-night-ink: #ecf1e4; --c-night-ink-soft: #adb8a0; --c-night-ink-faint: #86917a; --c-shadow-ink: #26301f; --c-shadow-night: #000000; } /* ════════ PALETTE 4 — LAVENDER (muted violet, lilac paper) ════════ */ [data-palette="lavender"] { --c-accent: #8677b3; --c-accent-strong: #6a5c96; --c-accent-soft: #ab9fd0; --c-accent-dk: #a79bd0; --c-accent-dk-strong: #c0b6e0; --c-success: #7f9270; --c-success-strong: #5f7350; --c-success-dk: #9db28d; --c-success-dk-strong: #b7c8a9; --c-gold: #cfa25e; --c-gold-dk: #dfba7e; --c-danger: #c05a6a; --c-danger-deep: #a84354; --c-danger-deep-dk: #e2919e; --c-paper: #f4f2f7; --c-paper-soft: #eae6f0; --c-card: #fdfcff; --c-card-max: #ffffff; --c-ink: #29242e; --c-ink-soft: #6d6577; --c-ink-faint: #948c9e; --c-night: #1c1721; --c-night-soft: #231d29; --c-night-card: #272130; --c-night-card-2: #312a3c; --c-night-card-hover: #372f43; --c-cream: #faf6ff; --c-night-ink: #efeaf4; --c-night-ink-soft: #b2a9bd; --c-night-ink-faint: #8a8296; --c-shadow-ink: #2c2338; --c-shadow-night: #000000; } /* ════════ PALETTE 5 — ROSE (dusty rose, blush paper) ════════ */ [data-palette="rose"] { --c-accent: #c06c7e; --c-accent-strong: #a05264; --c-accent-soft: #d494a2; --c-accent-dk: #d9899a; --c-accent-dk-strong: #e5a8b5; --c-success: #7f9678; --c-success-strong: #5f7859; --c-success-dk: #9db695; --c-success-dk-strong: #b7ccb0; --c-gold: #d6a355; --c-gold-dk: #e4ba75; --c-danger: #b04a3c; --c-danger-deep: #98392c; --c-danger-deep-dk: #e08f80; --c-paper: #f7f2f1; --c-paper-soft: #efe6e4; --c-card: #fffcfb; --c-card-max: #ffffff; --c-ink: #2e2527; --c-ink-soft: #766165; --c-ink-faint: #98858a; --c-night: #211719; --c-night-soft: #291e20; --c-night-card: #2d2224; --c-night-card-2: #382c2e; --c-night-card-hover: #3e3234; --c-cream: #fff5f6; --c-night-ink: #f4e9eb; --c-night-ink-soft: #bda6ab; --c-night-ink-faint: #937f84; --c-shadow-ink: #34222a; --c-shadow-night: #000000; } /* ════════ PALETTE 6 — HONEY (amber, warm parchment paper) ════════ */ [data-palette="honey"] { --c-accent: #bd8b3e; --c-accent-strong: #9a6f2c; --c-accent-soft: #d4ab6c; --c-accent-dk: #d6a95f; --c-accent-dk-strong: #e3bf82; --c-success: #86975c; --c-success-strong: #68793f; --c-success-dk: #a7b881; --c-success-dk-strong: #bfcc9d; --c-gold: #c97e4e; --c-gold-dk: #dc9a6f; --c-danger: #bd5341; --c-danger-deep: #a03e2b; --c-danger-deep-dk: #e08e79; --c-paper: #f8f3e7; --c-paper-soft: #f0e7d3; --c-card: #fffdf5; --c-card-max: #ffffff; --c-ink: #2e2a1f; --c-ink-soft: #776e56; --c-ink-faint: #978e74; --c-night: #211c12; --c-night-soft: #292317; --c-night-card: #2d271a; --c-night-card-2: #383021; --c-night-card-hover: #3e3625; --c-cream: #fffbee; --c-night-ink: #f4eedd; --c-night-ink-soft: #bfb392; --c-night-ink-faint: #948a6c; --c-shadow-ink: #3a2f16; --c-shadow-night: #000000; } /* ════════ PALETTE 7 — SLATE (calm steel grey-blue, minimal) ════════ */ [data-palette="slate"] { --c-accent: #607792; --c-accent-strong: #48607c; --c-accent-soft: #8b9cb2; --c-accent-dk: #8ba0ba; --c-accent-dk-strong: #a9bcd2; --c-success: #6f9282; --c-success-strong: #527560; --c-success-dk: #93b3a3; --c-success-dk-strong: #adc8bb; --c-gold: #c9a25f; --c-gold-dk: #d9b97e; --c-danger: #bb574e; --c-danger-deep: #a04138; --c-danger-deep-dk: #dd9086; --c-paper: #f4f5f6; --c-paper-soft: #e9ebee; --c-card: #fcfdfe; --c-card-max: #ffffff; --c-ink: #24272c; --c-ink-soft: #646b76; --c-ink-faint: #8b929d; --c-night: #181b1f; --c-night-soft: #1f2327; --c-night-card: #23272d; --c-night-card-2: #2d3239; --c-night-card-hover: #333940; --c-cream: #f6f9fc; --c-night-ink: #eaeef2; --c-night-ink-soft: #a8b0ba; --c-night-ink-faint: #808893; --c-shadow-ink: #22282f; --c-shadow-night: #000000; } /* ════════ PALETTE 8 — OLIVE (earthy khaki, sun-dried paper) ════════ */ [data-palette="olive"] { --c-accent: #918b48; --c-accent-strong: #75702f; --c-accent-soft: #b0aa6e; --c-accent-dk: #b3ad6a; --c-accent-dk-strong: #c8c389; --c-success: #6f9464; --c-success-strong: #54774a; --c-success-dk: #94b48a; --c-success-dk-strong: #adc8a4; --c-gold: #cd9c4f; --c-gold-dk: #ddb572; --c-danger: #b8543f; --c-danger-deep: #9d3f2b; --c-danger-deep-dk: #dd8f79; --c-paper: #f5f4ea; --c-paper-soft: #ebe9d8; --c-card: #fefdf4; --c-card-max: #ffffff; --c-ink: #2a291f; --c-ink-soft: #6e6c54; --c-ink-faint: #929072; --c-night: #1d1c13; --c-night-soft: #242318; --c-night-card: #28271b; --c-night-card-2: #333122; --c-night-card-hover: #393726; --c-cream: #fcfaea; --c-night-ink: #f1efdd; --c-night-ink-soft: #b8b593; --c-night-ink-faint: #8e8b6d; --c-shadow-ink: #302e18; --c-shadow-night: #000000; } /* ════════ PALETTE 9 — MIDNIGHT (muted indigo, ink-blue paper) ════════ */ [data-palette="midnight"] { --c-accent: #5f6cae; --c-accent-strong: #4a5591; --c-accent-soft: #8b96cb; --c-accent-dk: #8d99cf; --c-accent-dk-strong: #a9b3dd; --c-success: #74957f; --c-success-strong: #587963; --c-success-dk: #97b5a2; --c-success-dk-strong: #b1cabc; --c-gold: #cfa45c; --c-gold-dk: #ddbb7c; --c-danger: #bd5551; --c-danger-deep: #a33f3b; --c-danger-deep-dk: #de9088; --c-paper: #f3f3f7; --c-paper-soft: #e8e8f0; --c-card: #fcfcff; --c-card-max: #ffffff; --c-ink: #25262e; --c-ink-soft: #666877; --c-ink-faint: #8d8f9e; --c-night: #171821; --c-night-soft: #1e1f29; --c-night-card: #22232e; --c-night-card-2: #2c2d3a; --c-night-card-hover: #323341; --c-cream: #f5f6ff; --c-night-ink: #eaebf4; --c-night-ink-soft: #a7a9ba; --c-night-ink-faint: #7f8193; --c-shadow-ink: #212436; --c-shadow-night: #000000; }