/* ============================================================ Harmony — color tokens (yin / yang dual theme) Source of truth: CovaliStudio apps/web/src/styles/harmony-tokens.css Concept: black & white as equals — yin & yang — with the deep green of nature as the single accent. Every color resolves from a CSS custom property so the whole UI re-themes at runtime by switching `data-theme` on . → Yin (default, dark-first) → Yang (warm paper) The accent is the ONLY chromatic color. There is no purple, no blue-violet gradient — sage / pine carry every accent role. ============================================================ */ /* ============================================================ YIN · dark (default — matches the app's dark-first paint) ============================================================ */ :root, :root[data-theme='dark'] { /* — surfaces (depth ladder: bg → surface → card → panel) — */ --bg: #0e100e; /* app base */ --surface: #141613; /* chrome / strip */ --card: #16180f; /* cards, raised surfaces */ --panel: #1c1f1a; /* menus, modals, raised panels */ --input-bg: rgba(255,255,255,.03); --term-bg: #0b0d0a; /* terminal canvas */ /* — lines — */ --line: #26291f; /* hairlines, card borders */ --line-strong: #34382f; /* input borders, dividers */ /* — text — */ --text: #e9eae4; /* primary body + titles */ --text-2: #b6b9b0; /* secondary */ --muted: #7e837a; /* hints, inactive icons */ --faint: #565a51; /* captions, ids at rest */ /* — accent · nature green — */ --accent: #8caa86; /* sage — the live accent on dark */ --accent-deep: #3a5a40; /* deep pine — primary button fill */ --accent-text: #9fbf98; /* accent text on dark surfaces */ --accent-soft: rgba(140,170,134,.13); /* tint fill (pre-mixed) */ --accent-line: rgba(140,170,134,.30); /* tint border / focus ring */ /* — semantic · status — */ --warning: #c9a35b; --warning-soft: rgba(201,163,91,.14); --danger: #c07a6b; --danger-soft: rgba(192,122,107,.14); --success: var(--accent); /* — semantic · work-item type — */ --type-feature: #6f9e6a; --type-story: #6d8aa0; --type-task: #b8954a; --type-bug: #c07a6b; --story-soft: rgba(109,138,160,.16); /* — chips / fills / rows — */ --chip: rgba(255,255,255,.05); /* neutral chip / ghost-hover */ --row: rgba(140,170,134,.05); /* selected / hover row */ --skeleton: rgba(255,255,255,.07); /* — overlay / floating glass — */ --scrim: rgba(8,9,8,.55); /* modal backdrop */ --pill: rgba(28,31,26,.86); /* command bar / rail glass */ --pill-line: rgba(255,255,255,.10); /* glass hairline */ --pill-hi: rgba(255,255,255,.05); /* glass top highlight */ /* — the mark (yin-yang): lobes fixed, seed is sage — */ --mark-light: #f4f3ee; /* white lobe (always top) */ --mark-dark: #1b1d18; /* black lobe (always bottom) */ --mark-seed: #8caa86; /* the travelling sage seed */ } /* ============================================================ YANG · light (warm paper) Keyed on `data-theme='light'`. Deep pine reads as the accent on a light ground (sage is too pale on paper). ============================================================ */ :root[data-theme='light'] { --bg: #f3f2ec; /* warm paper */ --surface: #eceae2; --card: #ffffff; --panel: #ffffff; --input-bg: #f6f5ef; --term-bg: #faf9f5; --line: #e2e0d6; --line-strong: #d8d6ca; --text: #1b1d18; --text-2: #4a4d44; --muted: #8a8d80; --faint: #a9a89d; --accent: #3a5a40; /* deep pine = accent on light */ --accent-deep: #3a5a40; --accent-text: #3a5a40; --accent-soft: rgba(58,90,64,.10); --accent-line: rgba(58,90,64,.30); --warning: #a8842f; --warning-soft: rgba(168,132,47,.12); --danger: #bd6f5e; --danger-soft: rgba(189,111,94,.12); --success: var(--accent); --type-feature: #3a5a40; --type-story: #5f7d96; --type-task: #a8842f; --type-bug: #bd6f5e; --story-soft: rgba(95,125,150,.14); --chip: rgba(0,0,0,.045); --row: rgba(58,90,64,.05); --skeleton: rgba(0,0,0,.06); --scrim: rgba(120,118,108,.34); --pill: rgba(255,255,255,.82); --pill-line: rgba(0,0,0,.09); --pill-hi: rgba(255,255,255,.75); /* mark lobes are fixed in both themes; only the seed colour stays sage */ --mark-light: #f4f3ee; --mark-dark: #1b1d18; --mark-seed: #8caa86; } /* Harmony is dark-first: with no `data-theme` set, :root resolves to Yin (dark), matching the app's no-FOUC default. Consumers opt into Yang by stamping (see tokens — and lib theme.ts in the product). */