/* Low Gravitas Zen v1.3.1 — CSS Color Tokens GENERATED from palette.toml — do not edit by hand. https://github.com/low-gravitas/low-gravitas-zen-theme Usage: Dark mode (default): just works — :root provides dark palette. Light mode: add data-theme="light" to , or let prefers-color-scheme handle it automatically. Manual toggle: swap data-theme between "dark" and "light". Raw palette vars: --lgz-red, --lgz-bg-deep, --lgz-accent, etc. Semantic aliases: --bg, --surface, --text, --accent, --danger, etc. */ /* ── Raw palette (dark — default) ────────────────────────────────────────── */ :root, [data-theme="dark"] { --lgz-black: #5f5f5f; --lgz-red: #c9615e; --lgz-green: #70be9b; --lgz-yellow: #e2d072; --lgz-blue: #5580aa; --lgz-magenta: #d38dbb; --lgz-cyan: #7bd8db; --lgz-white: #e2e2d5; --lgz-bright-black: #82a092; --lgz-bright-red: #ec8e8c; --lgz-bright-green: #a9f9d5; --lgz-bright-yellow: #e6d7ae; --lgz-bright-blue: #a3cbf5; --lgz-bright-magenta: #fbbee8; --lgz-bright-cyan: #a1e5e8; --lgz-bright-white: #fffefe; --lgz-bg-deep: #100c00; --lgz-bg-mid: #20190c; --lgz-bg-raised: #302318; --lgz-selection: #40463c; --lgz-cursor: #86766d; --lgz-accent: #ffff86; --lgz-terminal-selection-bg: #2b413e; --lgz-terminal-selection-fg: #cddd8c; --lgz-error: #f44747; --lgz-pure-white: #ffffff; } /* ── Raw palette (light) ─────────────────────────────────────────────────── */ [data-theme="light"] { --lgz-black: #474747; --lgz-red: #a83e3c; --lgz-green: #1a6b4d; --lgz-yellow: #6a5510; --lgz-blue: #2e5a80; --lgz-magenta: #7d3e69; --lgz-cyan: #005f62; --lgz-white: #45453c; --lgz-bright-black: #466656; --lgz-bright-red: #c03030; --lgz-bright-green: #008050; --lgz-bright-yellow: #7d6b00; --lgz-bright-blue: #1670aa; --lgz-bright-magenta: #a8408a; --lgz-bright-cyan: #009095; --lgz-bright-white: #2a2a28; --lgz-bg-deep: #f5f0e6; --lgz-bg-mid: #e8e0d4; --lgz-bg-raised: #dbd0c2; --lgz-selection: #c8cec0; --lgz-cursor: #8a7e74; --lgz-accent: #5c2d91; --lgz-terminal-selection-bg: #b8cac6; --lgz-terminal-selection-fg: #3a4228; --lgz-error: #cc2020; --lgz-pure-white: #000000; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --lgz-black: #474747; --lgz-red: #a83e3c; --lgz-green: #1a6b4d; --lgz-yellow: #6a5510; --lgz-blue: #2e5a80; --lgz-magenta: #7d3e69; --lgz-cyan: #005f62; --lgz-white: #45453c; --lgz-bright-black: #466656; --lgz-bright-red: #c03030; --lgz-bright-green: #008050; --lgz-bright-yellow: #7d6b00; --lgz-bright-blue: #1670aa; --lgz-bright-magenta: #a8408a; --lgz-bright-cyan: #009095; --lgz-bright-white: #2a2a28; --lgz-bg-deep: #f5f0e6; --lgz-bg-mid: #e8e0d4; --lgz-bg-raised: #dbd0c2; --lgz-selection: #c8cec0; --lgz-cursor: #8a7e74; --lgz-accent: #5c2d91; --lgz-terminal-selection-bg: #b8cac6; --lgz-terminal-selection-fg: #3a4228; --lgz-error: #cc2020; --lgz-pure-white: #000000; } } /* ── Semantic aliases (dark — default) ───────────────────────────────────── */ :root, [data-theme="dark"] { --bg: var(--lgz-bg-deep); --surface: var(--lgz-bg-mid); --surface-raised: var(--lgz-bg-raised); --border: var(--lgz-cursor); --border-dim: var(--lgz-selection); --text: var(--lgz-white); --text-dim: var(--lgz-bright-black); --accent-secondary: var(--lgz-magenta); --danger: var(--lgz-red); --success: var(--lgz-green); --warning: var(--lgz-yellow); --info: var(--lgz-cyan); --link: var(--lgz-bright-blue); --selection-bg: var(--lgz-terminal-selection-bg); --selection-fg: var(--lgz-terminal-selection-fg); --text-on-accent: var(--lgz-bg-deep); --accent: var(--lgz-accent); --error: var(--lgz-error); } /* ── Semantic aliases (light) ────────────────────────────────────────────── */ [data-theme="light"] { --bg: var(--lgz-bg-deep); --surface: var(--lgz-bg-mid); --surface-raised: var(--lgz-bg-raised); --border: var(--lgz-cursor); --border-dim: var(--lgz-selection); --text: var(--lgz-white); --text-dim: var(--lgz-bright-black); --accent-secondary: var(--lgz-magenta); --danger: var(--lgz-red); --success: var(--lgz-green); --warning: var(--lgz-yellow); --info: var(--lgz-cyan); --link: var(--lgz-bright-blue); --selection-bg: var(--lgz-terminal-selection-bg); --selection-fg: var(--lgz-terminal-selection-fg); --text-on-accent: var(--lgz-bg-deep); --accent: var(--lgz-accent); --error: var(--lgz-error); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: var(--lgz-bg-deep); --surface: var(--lgz-bg-mid); --surface-raised: var(--lgz-bg-raised); --border: var(--lgz-cursor); --border-dim: var(--lgz-selection); --text: var(--lgz-white); --text-dim: var(--lgz-bright-black); --accent-secondary: var(--lgz-magenta); --danger: var(--lgz-red); --success: var(--lgz-green); --warning: var(--lgz-yellow); --info: var(--lgz-cyan); --link: var(--lgz-bright-blue); --selection-bg: var(--lgz-terminal-selection-bg); --selection-fg: var(--lgz-terminal-selection-fg); --text-on-accent: var(--lgz-bg-deep); --accent: var(--lgz-accent); --error: var(--lgz-error); } } /* ── Selection ───────────────────────────────────────────────────────────── */ ::selection { background: var(--selection-bg); color: var(--selection-fg); }