/* Qualia / Causal Map design tokens — the single source for colour, type, spacing and radii, taken from the visual-direction mockup (_tmp/ui-mockup.html). One token set drives both themes: Light (near-white, green-biased neutrals) and Dark (brand-harmonised green). Theme is driven by Bootstrap 5.3's own attribute, data-bs-theme, so the app tokens and Bootstrap's components stay in step off one switch. prefers-color -scheme is the default; an explicit data-bs-theme on / wins. The legacy --color-* / --font-family-primary names (still used across stylesNew.css and tabulator-styles.css) are kept at their original values at the bottom, so nothing that uses them shifts until each surface is migrated onto the tokens above. */ :root { /* --- brand accents (identical on both themes) --- */ --ink: #1F1F36; --mint: #00FFAF; --blue: #6DC4C8; --yellow: #F7ED73; --pink: #FF8FB8; /* --- semantic (kept separate from the accent) --- */ --ok: #1a9d6a; --warn: #c99700; --bad: #d1495b; /* --- LIGHT theme (default) --- */ --bg: #f6f8f7; --surface: #ffffff; --surface-2: #eef2f0; --border: #dde5e1; --border-strong: #c7d2cc; --text: #1c2621; --text-dim: #5c6b64; --text-faint: #8a978f; --accent: #0f8f6b; /* deep mint, readable on white */ --accent-rgb: 15, 143, 107; --accent-ink: #ffffff; --accent-muted: #4d8f7c; /* calm mint for borders/outlines, not a pop */ --focus: #00c98c; --shadow: 0 1px 2px rgba(20,40,32,.06), 0 6px 20px rgba(20,40,32,.06); --shadow-sm: 0 1px 2px rgba(20,40,32,.07); /* --- type --- */ --q-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --step--1: .8125rem; --step-0: .9375rem; --step-1: 1.0625rem; --step-2: 1.375rem; --step-3: 1.75rem; /* --- radii --- */ --r: 10px; --r-sm: 7px; --r-pill: 999px; } /* Dark theme: via prefers-color-scheme, and via an explicit data-bs-theme. */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --bg: #14201b; --surface: #1b2b23; --surface-2: #223529; --border: #2c3f34; --border-strong: #3a5145; --text: #e8f0ec; --text-dim: #9fb3a8; --text-faint: #728579; --accent: #00FFAF; --accent-rgb: 0, 255, 175; --accent-ink: #0b1a13; --accent-muted: #3f9e83; --focus: #00FFAF; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 26px rgba(0,0,0,.35); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); } } [data-bs-theme="dark"] { --bg: #14201b; --surface: #1b2b23; --surface-2: #223529; --border: #2c3f34; --border-strong: #3a5145; --text: #e8f0ec; --text-dim: #9fb3a8; --text-faint: #728579; --accent: #00FFAF; --accent-rgb: 0, 255, 175; --accent-ink: #0b1a13; --accent-muted: #3f9e83; --focus: #00FFAF; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 26px rgba(0,0,0,.35); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); } [data-bs-theme="light"] { --bg: #f6f8f7; --surface: #ffffff; --surface-2: #eef2f0; --border: #dde5e1; --border-strong: #c7d2cc; --text: #1c2621; --text-dim: #5c6b64; --text-faint: #8a978f; --accent: #0f8f6b; --accent-rgb: 15, 143, 107; --accent-ink: #ffffff; --accent-muted: #4d8f7c; --focus: #00c98c; --shadow: 0 1px 2px rgba(20,40,32,.06), 0 6px 20px rgba(20,40,32,.06); --shadow-sm: 0 1px 2px rgba(20,40,32,.07); } /* The legacy --color-* names that the editor is built on are remapped onto these tokens in theme-bridge.css (which loads last, so it wins over stylesNew.css's own :root). See that file. */