/* --------------------------------------------------------------- tokens.css — palettes and design tokens. Two attributes on drive everything: data-palette sage | mist | sand | lavender | slate | moss data-theme light | dark (resolved from the "auto/light/dark" setting) Every palette defines the full token set in light, then overrides only what changes in dark. --------------------------------------------------------------- */ :root { /* shape + motion — shared by every palette */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ease: cubic-bezier(0.32, 0.72, 0.36, 1); --dur: 160ms; --sidebar-w: 248px; --content-max: 1120px; /* semantic status colours — nudged per theme further down */ --ok: #4a8a63; --ok-soft: #e6f0e9; --warn: #a87434; --warn-soft: #f6eeda; --danger: #b1544f; --danger-soft: #f7e6e5; --urgent: #c0603f; --urgent-soft: #fbeae3; --shadow-1: 0 1px 2px rgba(20, 24, 28, 0.05), 0 1px 3px rgba(20, 24, 28, 0.04); --shadow-2: 0 2px 6px rgba(20, 24, 28, 0.06), 0 8px 24px rgba(20, 24, 28, 0.08); --shadow-3: 0 12px 48px rgba(20, 24, 28, 0.16); color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ============================================================= 1. Calm Sage — muted green, the default ============================================================= */ html[data-palette="sage"] { --bg: #f2f5f1; --bg-alt: #e9eee7; --surface: #fbfcfa; --surface-2: #f2f5f1; --surface-hover: #eaefe8; --border: #dde4da; --border-strong: #c6d1c2; --text: #26302a; --text-dim: #5e6b62; --text-faint: #8b968f; --accent: #5f8a6b; --accent-hover: #4f7a5b; --accent-soft: #e2ece3; --accent-line: #b9d0bd; --accent-text: #3d6549; --on-accent: #ffffff; } html[data-palette="sage"][data-theme="dark"] { --bg: #161a17; --bg-alt: #12150f; --surface: #1e2420; --surface-2: #252c27; --surface-hover: #2b332d; --border: #2f382f; --border-strong: #435043; --text: #e3e9e3; --text-dim: #a4b0a6; --text-faint: #78847a; --accent: #83b291; --accent-hover: #97c3a4; --accent-soft: #26332a; --accent-line: #3c5343; --accent-text: #a3ccae; --on-accent: #12190f; } /* ============================================================= 2. Morning Mist — cool blue-grey ============================================================= */ html[data-palette="mist"] { --bg: #f1f4f7; --bg-alt: #e7ecf1; --surface: #fbfcfd; --surface-2: #f1f4f7; --surface-hover: #e9eef3; --border: #dbe2e9; --border-strong: #c2ccd6; --text: #232c34; --text-dim: #5b6773; --text-faint: #88939e; --accent: #5b83a6; --accent-hover: #4b7396; --accent-soft: #e2ebf3; --accent-line: #b6cbdd; --accent-text: #3c6187; --on-accent: #ffffff; } html[data-palette="mist"][data-theme="dark"] { --bg: #14181d; --bg-alt: #101418; --surface: #1c2228; --surface-2: #232a31; --surface-hover: #2a323a; --border: #2c353d; --border-strong: #3f4b55; --text: #e1e7ec; --text-dim: #a0acb7; --text-faint: #74808b; --accent: #7ba7cd; --accent-hover: #90b7d9; --accent-soft: #22303b; --accent-line: #375063; --accent-text: #9cc0de; --on-accent: #0f1519; } /* ============================================================= 3. Warm Sand — soft neutral warmth ============================================================= */ html[data-palette="sand"] { --bg: #f7f4ef; --bg-alt: #efeae1; --surface: #fdfbf8; --surface-2: #f4f0e9; --surface-hover: #f0ebe2; --border: #e5ded2; --border-strong: #d0c6b5; --text: #322c25; --text-dim: #6b6255; --text-faint: #98907f; --accent: #9a7a52; --accent-hover: #866847; --accent-soft: #f0e8dc; --accent-line: #d8c6ab; --accent-text: #7a5f3d; --on-accent: #ffffff; } html[data-palette="sand"][data-theme="dark"] { --bg: #1a1714; --bg-alt: #151210; --surface: #221e1a; --surface-2: #2a2521; --surface-hover: #322c26; --border: #352f28; --border-strong: #4b433a; --text: #ece5db; --text-dim: #b0a596; --text-faint: #857b6d; --accent: #c2a172; --accent-hover: #d1b284; --accent-soft: #302719; --accent-line: #4e4130; --accent-text: #d3b98a; --on-accent: #1a1510; } /* ============================================================= 4. Quiet Lavender — low-saturation violet ============================================================= */ html[data-palette="lavender"] { --bg: #f5f3f8; --bg-alt: #ebe8f1; --surface: #fcfbfd; --surface-2: #f4f2f8; --surface-hover: #eeebf4; --border: #e2dded; --border-strong: #cbc3da; --text: #2b2733; --text-dim: #635d72; --text-faint: #8f889d; --accent: #7a6da6; --accent-hover: #6a5d96; --accent-soft: #e9e5f3; --accent-line: #c6bcdf; --accent-text: #5d5188; --on-accent: #ffffff; } html[data-palette="lavender"][data-theme="dark"] { --bg: #17161c; --bg-alt: #131218; --surface: #1f1d26; --surface-2: #26232f; --surface-hover: #2d2937; --border: #302c3a; --border-strong: #443e52; --text: #e6e3ec; --text-dim: #a8a2b6; --text-faint: #7d7789; --accent: #a498cf; --accent-hover: #b4a9d9; --accent-soft: #282338; --accent-line: #443b60; --accent-text: #b6abdb; --on-accent: #15121c; } /* ============================================================= 5. Deep Slate — dark-first neutral ============================================================= */ html[data-palette="slate"] { --bg: #f3f4f6; --bg-alt: #e9ebee; --surface: #fbfbfc; --surface-2: #f2f3f5; --surface-hover: #eaecef; --border: #dde0e4; --border-strong: #c4c9d0; --text: #262a30; --text-dim: #5d646d; --text-faint: #8a919a; --accent: #5e7385; --accent-hover: #4e6375; --accent-soft: #e6eaee; --accent-line: #bcc6ce; --accent-text: #445667; --on-accent: #ffffff; } html[data-palette="slate"][data-theme="dark"] { --bg: #15181c; --bg-alt: #111317; --surface: #1d2126; --surface-2: #24282e; --surface-hover: #2b3037; --border: #2d323a; --border-strong: #414852; --text: #e4e7ea; --text-dim: #a2a9b2; --text-faint: #767d86; --accent: #8fa8bb; --accent-hover: #a1b7c8; --accent-soft: #242c34; --accent-line: #3a4652; --accent-text: #a7bccb; --on-accent: #12161a; } /* ============================================================= 6. Night Moss — deep green, dark-leaning ============================================================= */ html[data-palette="moss"] { --bg: #f1f4f2; --bg-alt: #e6ebe7; --surface: #fafcfb; --surface-2: #f0f4f1; --surface-hover: #e8ede9; --border: #dae2dd; --border-strong: #c0cdc4; --text: #222b26; --text-dim: #58665d; --text-faint: #86928b; --accent: #4f7f6b; --accent-hover: #416f5c; --accent-soft: #e0ebe5; --accent-line: #b4ccc0; --accent-text: #386051; --on-accent: #ffffff; } html[data-palette="moss"][data-theme="dark"] { --bg: #121715; --bg-alt: #0e1211; --surface: #19201d; --surface-2: #202824; --surface-hover: #26302b; --border: #29332e; --border-strong: #3b4842; --text: #e0e8e3; --text-dim: #9fada6; --text-faint: #74827b; --accent: #74b096; --accent-hover: #88c0a7; --accent-soft: #1f2f28; --accent-line: #345046; --accent-text: #92c8b0; --on-accent: #0f1613; } /* status colours re-tuned for dark so they stay calm, not neon */ html[data-theme="dark"] { --ok: #7fb18f; --ok-soft: #1f2b23; --warn: #c9a468; --warn-soft: #2e2718; --danger: #d08b86; --danger-soft: #33211f; --urgent: #dd9273; --urgent-soft: #35231a; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.34), 0 10px 28px rgba(0, 0, 0, 0.3); --shadow-3: 0 14px 52px rgba(0, 0, 0, 0.52); }