/* mnemodo — the theme layer. Loaded BEFORE cockpit.css, and on its own by the auth pages (which carry their own component CSS and never load cockpit.css). ── Why this file exists ──────────────────────────────────────────────────── The palette used to live at the top of cockpit.css under COLOUR names (--navy-deep, --cream, --gold). That cannot carry a second theme, and not for cosmetic reasons: `--navy-deep` was both the PAGE background and the INPUT background. Those two roles move in OPPOSITE directions between themes — in dark a field is recessed below its panel, on paper it is the brightest thing on it — so no single value of --navy-deep can be right in light mode. So surfaces are named by ROLE here (--bg / --panel / --field / --rail), and the old colour names are kept as ALIASES at the bottom. That is deliberate and load-bearing: ~250 inline `style=` attributes across the templates still say `var(--navy-light)`, and without the aliases this would have to be one unreviewable diff instead of a page-at-a-time migration. ── The one rule that decides every value ─────────────────────────────────── DARK EMITS, LIGHT IMPRESSES. Dark treats gold as light: glows, raised panels, a lamp wash. Light treats it as ink: crisp hairlines, recessed panels, no glow anywhere. That is why --lamp is `none` in light rather than a paler gradient, and why hairlines stop being gold (gold at .18α is invisible on paper) and become graphite. ── Alpha families ────────────────────────────────────────────────────────── cockpit.css held 131 copies of rgba(201,169,97,…) — every hairline, wash, chip border and hover tint in the product, at a dozen different alphas. They are all expressed through --accent-rgb now, so a theme swap moves them in one edit. Same for the navy and semantic families. When you need a new tint, use rgba(var(--accent-rgb),…) — never a fresh literal. Resolution: a pre-paint script writes data-theme="dark"|"light" on (see _theme_boot.html). "Auto" is resolved to a concrete value there, which is why this file needs exactly two blocks and no @media gymnastics. The media query below is only a no-JS fallback. */ /* ── shared: type, radii, and the values that do not vary by theme ────────── */ :root{ --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --r:14px; } /* ═══ DARK — the shipping look. Every value here is the one that shipped before this file existed; only the NAMES are new. ═══════════════════ */ :root, :root[data-theme="dark"]{ color-scheme:dark; /* surfaces, by role */ --bg:#0a1428; /* the page */ --surface:#142440; /* one step up: dials, tag boxes, code */ --panel:#1e3258; /* raised: .sec .res .answer .body */ --panel-2:#2a4170; /* raised further: chips inside a panel */ --field:#0a1428; /* inputs — RECESSED below their panel */ --rail:rgba(10,20,40,.45); /* the sidebar */ /* ink */ --ink:#f5f0e6; --ink-dim:#c9bfae; --ink-dimmer:#8a8270; /* accent */ --accent:#c9a961; --accent-hi:#e8c87a; /* hover / emphasis — BRIGHTER in dark */ --accent-lo:#9d8240; /* text/glyphs knocked OUT of a gold fill (.btn, .pg.on, .seg button.on …). This is the other role that inverts: gold is light in dark mode so the label on it is near-black; gold is DARK on paper so the label goes white. Using --bg here — as the code used to via --navy-deep — puts paper on paper. */ --on-accent:#0a1428; /* semantic — one red and one green for the whole product (see AGENTS.md) */ --red:#c4604e; --red-ink:#f0c0c0; /* red TEXT, which needs more contrast than the box */ --green:#6b9e7c; --green-ink:#8fd6a8; /* the seven memory-type colours: a 7px dot, a 2px stripe or a glyph, never a fill. --t-finding is a rose: the one hue left that no other type holds (claim is salmon-orange, summary gold, pattern violet) and 51+ apart in RGB from every one of them, which is what keeps a 7px dot tellable apart. */ --t-source:#c9bfae; --t-atomic:#8fa6d8; --t-qa:#7fb3a8; --t-claim:#d08a6e; --t-summary:#e8c87a; --t-pattern:#b08fd0; --t-finding:#d98fb0; /* …and the TEXT weights of the two that label things. A pill's text needs more contrast than its border, so it is its own token rather than the dot colour. */ --atomic-ink:#9db9d6; --pattern-ink:#cbb0e2; /* rgb triples — every alpha tint in the product derives from these */ --accent-rgb:201,169,97; --deep-rgb:10,20,40; /* was rgba(10,20,40,…) — recessed washes, chip beds */ --panel-rgb:30,50,88; /* was rgba(30,50,88,…) — raised washes */ --panel2-rgb:20,36,64; /* was rgba(20,36,64,…) — the quieter raised wash */ --red-rgb:196,96,78; --green-rgb:111,191,143; --claim-rgb:208,138,110; /* --t-claim, used as a tint on tension surfaces */ --atomic-rgb:120,160,200; /* --t-atomic as a tint (embedding pills) */ --pattern-rgb:176,143,208; /* --t-pattern as a tint (pattern flags) */ --ink-dimmer-rgb:138,130,112; --shadow-rgb:0,0,0; --sheen-rgb:255,255,255; /* highlights; near-invisible in dark, real in light */ /* light as a material: the lamp over the top-right of every page */ /* Borders that some component CSS asks for by these names. They were never DEFINED anywhere — `var(--line)` with no fallback resolves to an invalid value, which makes border-color fall back to currentColor, so a few panels have been outlined in cream text colour rather than a hairline. Defining them fixes that and makes them theme. */ --line:rgba(201,169,97,.18); --line-soft:rgba(201,169,97,.10); /* the terracotta used for "broken"/"forgotten" affordances in the graph views */ --rust:#c98b6b; /* the digest heat ramp, dim -> bright. On paper it has to run the OTHER way (pale -> dark), which is exactly why it cannot stay a hard-coded gold ramp. */ --hm1:#5d4e2a; --hm2:#8a7238; --hm3:#c9a961; --hm4:#e8c87a; /* ingest: a row the pipeline deliberately skipped */ --s-ignored:#5f6b80; --lamp:radial-gradient(1100px 600px at 88% -8%,rgba(201,169,97,.06),transparent 60%); --lift:0 8px 24px -10px rgba(0,0,0,.6); --veil:rgba(10,15,25,.55); /* the busy overlay */ --dial-on:linear-gradient(180deg,rgba(201,169,97,.24),rgba(201,169,97,.13)); --graph-bg:#080f1e; /* the Mindscape canvas bed */ --graph-veil:rgba(10,20,40,.7); } /* ═══ LIGHT — paper and graphite. Not an inversion: three roles flip. 1. panels RECESS instead of rising (the page itself is the paper) 2. fields RISE to white instead of recessing 3. hairlines are graphite, not gold Every value below is AA against both --bg and --panel. ═════════════ */ :root[data-theme="light"]{ color-scheme:light; --bg:#fbf9f4; /* paper — warm, but the brand's own cream, not grey */ --surface:#f7f3ea; --panel:#f3eee4; /* a faint recess; the hairline does the real work */ --panel-2:#eae4d6; /* Inputs are RECESSED here too, not white. This block used to read `#ffffff` — "white paper, held by a firm hairline" — on the theory that a field should RISE on paper while it sinks in the dark. In practice a wall of pure white boxes on a warm cream page is glare, and it was the first thing reported about the light theme twice over. The look being asked for is the Memories ledger's own search box, which sits one step DOWN from the page it rests on. So light mode now agrees with dark mode about direction — a field is always a well — and only the depth differs. Chosen to stay a visible step below --panel (#f3eee4), the deepest surface a field normally sits on, so a field reads as a field on the page, on a panel, and inside a dialog (which is --surface). */ --field:#efe9dd; --rail:#f0ebe0; /* very slightly deeper than the page: a bound spine */ --ink:#1b1f27; /* 15.7:1 on paper */ --ink-dim:#4d5563; /* 7.1:1 */ --ink-dimmer:#6b7382; /* 4.5:1 on paper, 4.1 on a panel — labels only */ --accent:#846829; /* gold has to darken to pass on paper: 4.6:1 */ --accent-hi:#5d4318; /* hover moves toward CONTRAST here, not brightness */ --accent-lo:#b39555; /* decorative rules and gradient ends only */ --on-accent:#fdfcf9; /* on a dark gold fill the label is paper, not ink */ --red:#a8402c; --red-ink:#8f3423; --green:#3d7350; --green-ink:#2f5c3f; /* The type encoding, as 7px dots and 2px stripes on paper. Derived, not guessed: for each dark colour, keep the HUE (it IS the encoding), lift saturation ~18% because paper washes chroma out, and darken ONLY as far as a 3.2:1 contrast floor against --panel demands. The first cut of this file darkened by feel and landed at 4.6–6.7:1 — every dot read as near-black and the six were no longer tellable apart. These sit at ~3.5:1 and are measurably MORE distinct than the dark set they came from (closest pair 63 apart in RGB, vs 41 in dark). */ --t-source:#97825e; --t-atomic:#5e83d3; --t-qa:#4e9182; --t-claim:#cf673e; --t-summary:#aa7d10; --t-pattern:#9f70cd; /* same derivation as the six: hue held, saturation lifted, darkened only to the contrast floor (3.9:1 here). Deliberately blued off claim's hue — at paper saturation a straight rose sat 62 apart from --t-claim, under the 63 that makes the set readable; this sits 78 from claim and 85 from pattern. */ --t-finding:#bf4d86; --atomic-ink:#3c5aa8; --pattern-ink:#6b45a5; --accent-rgb:132,104,41; /* The three navy families are used at .35–.92 alpha as recessed / raised BEDS. They cannot become ink here: the alphas live in the component rules, so rgba(ink,.55) would paint a dark smear where dark mode wanted a subtle surface. So they become LIGHT triples chosen to composite over paper into a faint warm bed at the alphas actually in use — which keeps the ordering the dark theme intends (higher alpha = deeper bed) without touching 40 rules. */ --deep-rgb:224,215,198; /* .55 over paper → ~#ece6db */ --panel-rgb:232,224,208; --panel2-rgb:238,231,217; --red-rgb:168,64,44; --green-rgb:61,115,80; --claim-rgb:157,78,40; --atomic-rgb:66,88,155; --pattern-rgb:102,72,156; --ink-dimmer-rgb:107,115,130; /* Same reasoning for shadows, which run .35–.95: near-black at those alphas is a bruise on paper. A warm mid-grey keeps them soft at every alpha in use. */ --shadow-rgb:156,146,128; /* white-on-navy sheens become ink-on-paper, or they simply vanish */ --sheen-rgb:27,31,39; --line:rgba(27,31,39,.13); --line-soft:rgba(27,31,39,.075); --rust:#a2542c; /* reversed: on paper MORE means DARKER. A dim-to-bright gold ramp inverts the reading, because a pale cell is the quiet one here, not the busy one. */ --hm1:#ede2c8; --hm2:#d6b876; --hm3:#ab8938; --hm4:#77601f; --s-ignored:#5c6675; --lamp:none; /* no lamp in daylight */ --lift:0 1px 2px rgba(27,31,39,.05),0 6px 18px -12px rgba(27,31,39,.20); --veil:rgba(251,249,244,.72); --dial-on:rgba(132,104,41,.10); --graph-bg:#fdfcf9; --graph-veil:rgba(255,255,255,.78); } /* Hairlines and washes. Declared after both blocks so one definition serves both themes — only the triple underneath moves. Light overrides them because gold at these alphas simply does not exist on paper. */ :root{ --bd:1px solid rgba(var(--accent-rgb),.18); --bd-soft:1px solid rgba(var(--accent-rgb),.10); --bd-firm:1px solid rgba(var(--accent-rgb),.38); --wash:rgba(var(--accent-rgb),.10); /* A bed for something a CAMERA has to read, not a person: a QR's dark modules need a light surface behind them or a phone will not lock on. Theme-invariant on purpose — it is the same paper in both themes — which is exactly why it needs a token: the dark rule that wanted it reached for a raw hex, and cockpit.css holds no raw colours. */ --scan-bed:#efe9dd; --scan-bed-rgb:239,233,221; } :root[data-theme="light"]{ --bd:1px solid rgba(27,31,39,.13); --bd-soft:1px solid rgba(27,31,39,.075); --bd-firm:1px solid rgba(27,31,39,.26); --wash:rgba(var(--accent-rgb),.07); } /* No-JS fallback ONLY. The boot script normally stamps a concrete data-theme before first paint, so this never applies; it exists so a browser with scripting off still honours the OS preference. Kept in sync with the block above by hand — it is nine lines, and duplicating them is cheaper than making every component rule live inside a media query. */ @media (prefers-color-scheme:light){ :root:not([data-theme]){ color-scheme:light; --bg:#fbf9f4; --surface:#f7f3ea; --panel:#f3eee4; --panel-2:#eae4d6; --field:#efe9dd; --rail:#f0ebe0; --ink:#1b1f27; --ink-dim:#4d5563; --ink-dimmer:#6b7382; --accent:#846829; --accent-hi:#5d4318; --accent-lo:#b39555; --on-accent:#fdfcf9; --red:#a8402c; --red-ink:#8f3423; --green:#3d7350; --green-ink:#2f5c3f; --t-source:#97825e; --t-atomic:#5e83d3; --t-qa:#4e9182; --t-claim:#cf673e; --t-summary:#aa7d10; --t-pattern:#9f70cd; --t-finding:#bf4d86; --atomic-ink:#3c5aa8; --pattern-ink:#6b45a5; --accent-rgb:132,104,41; --red-rgb:168,64,44; --green-rgb:61,115,80; --claim-rgb:157,78,40; --atomic-rgb:66,88,155; --pattern-rgb:102,72,156; --ink-dimmer-rgb:107,115,130; --deep-rgb:224,215,198; --panel-rgb:232,224,208; --panel2-rgb:238,231,217; --shadow-rgb:156,146,128; --sheen-rgb:27,31,39; --line:rgba(27,31,39,.13); --line-soft:rgba(27,31,39,.075); --rust:#a2542c; --hm1:#ede2c8; --hm2:#d6b876; --hm3:#ab8938; --hm4:#77601f; --s-ignored:#5c6675; --lamp:none; --lift:0 1px 2px rgba(27,31,39,.05),0 6px 18px -12px rgba(27,31,39,.20); --veil:rgba(251,249,244,.72); --dial-on:rgba(132,104,41,.10); --graph-bg:#fdfcf9; --graph-veil:rgba(255,255,255,.78); --bd:1px solid rgba(27,31,39,.13); --bd-soft:1px solid rgba(27,31,39,.075); --bd-firm:1px solid rgba(27,31,39,.26); --wash:rgba(132,104,41,.07); } } /* ── Aliases ──────────────────────────────────────────────────────────────── The old colour names, so the ~250 inline `style=` attributes and the ten self-styled auth templates keep working while they migrate. Do NOT use these in new code — reach for the role token. Removing an alias is safe only once `grep -rn "var(--navy-light)" orchestrator/` comes back empty. --navy-deep is aliased to --bg (the page), which is the role it carries in almost every use. The handful of places where it meant "an input's bed" were changed to --field in the same commit, because that is the pair that inverts and an alias cannot serve both. */ :root{ --navy-deep:var(--bg); --navy:var(--surface); --navy-light:var(--panel); --navy-lighter:var(--panel-2); --cream:var(--ink); --cream-dim:var(--ink-dim); --cream-dimmer:var(--ink-dimmer); --gold:var(--accent); --gold-bright:var(--accent-hi); --gold-deep:var(--accent-lo); }