/* Morcom — one palette for every app, light and dark.
Owner, 11-Sep-2026: "har screen ek MNC level ka redesign karo dark and light mode dono ke lea
and make sure ki theme light based ho."
⛔ LIGHT IS THE BASE, NOT A VARIANT. The plain `:root` block below IS the light theme, so a
screen that never thinks about theming still looks right, and an app that loads this file and
nothing else is already correct in daylight — which is how the factory runs.
⛔ EVERY TOKEN IS DEFINED THREE TIMES, and all three are needed:
:root the light theme, always
@media (prefers-color-scheme: dark) the phone or laptop set to dark
:root:not([data-theme="light"]) …unless the person chose light here
:root[data-theme="dark"] the person chose dark here
A colour that exists in only the first is a bug waiting for the first person who flips their
phone; a dark block without the `:not([data-theme="light"])` guard makes the app's own toggle
unable to go back to light on a dark laptop.
⛔ THESE NAMES ARE NOT NEW. They are the vocabulary the Settings console has used since
2026 — this file lifts them out so the other apps stop inventing their own. Adding a synonym
(`--card` next to `--surface`) is how two screens drift apart in one theme and not the other.
WHERE THE COLOURS COME FROM
navy the rail and primary buttons — Morcom's own
blue links, focus, the accent
green / amber / red good · warning · bad. Semantic, never decorative: a red that means
"brand" cannot also mean "stop", and this plant reads red as stop.
*/
:root {
/* ⛔ TELL THE BROWSER WHICH THEME IT IS PAINTING, or it paints its own controls light.
11-Sep-2026, the owner, on the PPC "Edit batch" drawer in dark: "words dikhai nahi dete jahan
likhna hai". Every token on the page had gone dark — but this file never said
`color-scheme`, so the browser still drew each and date picker in its LIGHT
style: a white box, holding text the page had just made light. White on white, on the one
screen where a planner types a date. Declared in all three blocks, like every other token. */
color-scheme: light;
/* A field has to read as "type here" against the panel it sits on. Light keeps the white box
it has always been; dark gets its own value below, because `--surface` IS the drawer's colour
and a field painted the same would vanish into it. */
--field: var(--surface);
/* ── THE WARM PALETTE (owner, 13-Sep-2026) ───────────────────────────────────────────────
He was asked to choose between the commissioned design's warm cream system and this file's
navy, and chose neither half-way: "designer se dark and light mode dono design krwao" — keep
the warm system, but author its dark ramp before anything is built on it. So these are
REPLACED VALUES UNDER THE SAME NAMES, not a second vocabulary: `ui.css` spends --surface,
--ink-*, --blue, --green, --amber, --red and their -bg/-ln pairs, so every `u-` class on
every console follows automatically and nothing else had to change.
⛔ TERRACOTTA IS THE ACCENT, NOT "STOP". The cream system ships two hues, which left
terracotta doing both brand-accent and danger. This plant reads red as stop, so a third hue
was added: --red is its own warm red, --blue holds terracotta (the accent role), --green
holds sage. Four semantic roles, exactly as this file already expected. */
/* brand + semantic */
--navy: #8c491a;
--red: #a3271d;
--red-2: #8a2018;
--blue: #8c491a;
--green: #56633f;
--amber: #8a5a10;
/* surfaces and ink — light is the base */
--bg: #f5ead8;
--surface: #f9f4ed;
--surface-2: #f7f1e5;
--sunk: #eee7db;
--ink: #201e1d;
--ink-2: #4a4238;
/* ⛔ THE TWO FAINT STEPS WERE BELOW AA, AND THEY CARRY REAL SENTENCES.
Measured on the running app, 11-Sep-2026, on the navy era's #f4f6f9 ground:
--ink-3 #6b7688 4.59:1 (Settings' table headings — only just)
--ink-4 #8b94a3 3.06:1 FAIL
`--ink-4` is not chrome. It was painting "Nothing left the store in the window" in Inventory,
"0 booked / 1,06,400 capacity" in the Control Tower, and every nav group label — information a
person is meant to read. A ladder gets its steps from CONTRAST, not from fading the last one
out of legibility; the separation below is kept by darkening --ink-3 rather than by letting
--ink-4 stay pale. (Those hexes and ratios are the navy palette's, kept because the LESSON is
what matters; the warm ramp's own numbers are on the two tokens below.) */
--ink-3: #645c50;
/* ⛔ 4.47 — NOT THE 4.70 THE ROUND-2 HANDOFF CLAIMED, AND BELOW AA. It shipped --ink-4 as
#736a5c. Measured against the three grounds this token actually sits on: 4.47 on --bg,
4.86 on --surface, 4.33 on --sunk — a FAIL on two of them, and --sunk is the table header
strip where the 11.5px uppercase labels live. #6d6456 clears all three (4.89 / 5.32 / 4.74)
and keeps its distance from --ink-3. Sixteen of the handoff's eighteen ratios reproduced
exactly; this was the one that did not, and the note above is the same lesson paid for once
already. Its dark value needed no change (4.98 on --surface, 5.44 on --bg). */
--ink-4: #6d6456;
--line: #ddd3c3;
--line-2: #e7ddcd;
/* tinted backgrounds that must exist in BOTH themes, or a panel loses its meaning in one */
--red-bg: #fbe3df;
--green-bg: #e1eecc;
--amber-bg: #fdf0d6;
--blue-bg: #fff2eb;
--red-ln: #f0bdb4;
--green-ln: #ccdbb2;
--amber-ln: #e8cf9a;
--blue-ln: #ffc6a5;
/* re-tinted warm: a navy-black shadow over a cream ground reads as grey dirt, not depth */
--shadow: 0 1px 2px rgba(46, 35, 26, .07), 0 8px 24px rgba(46, 35, 26, .08);
--shadow-lg: 0 24px 60px rgba(46, 35, 26, .16);
/* ⛔ THE SAME IN BOTH THEMES, ON PURPOSE — the four below are painted ON the navy rail, which
is already dark in daylight. Giving them a dark variant would be inventing a second problem:
white-on-navy does not stop working when the page around it goes dark. `--rail` itself does
shift, a shade, so the rail sits against the darker page rather than glowing on it. */
/* ⛔ THE MORCOM MARK IS NOT THE "STOP" RED, even though they are the same hex in daylight.
`--red` flips to #f0705f in dark so a warning still reads on a dark panel — correct for a
warning, wrong for a logo tile: the brand square and the round avatar are `background: var(--red);
color: #fff`, and white on #f0705f measured 2.92:1 on six consoles. A brand mark must not change
because the page went dark, so it gets its own name that never flips. White on it is 4.9:1. */
--brand-red: #c8322b;
/* The rail is dark in BOTH themes, as it always was — only its shade shifts so it sits against
the page rather than glowing on it. 13-Sep: the cream system makes it a deep olive in light
and the near-black --sunk in dark. `--rail-ink` is one value for both; only the muted step
moves, because the two grounds are far enough apart that one value cannot serve both. */
--rail: #272e1b;
--rail-ink: #f4ece0;
--rail-ink-2: #b9c2a4;
--rail-on: rgba(255, 255, 255, .09);
--btn-primary-bg: var(--navy);
--btn-primary-ink: #fff;
/* ── WHAT SITS *ON* A SEMANTIC COLOUR ────────────────────────────────────────────────────
⛔ `background: var(--green); color: #fff` IS A BUG IN DARK, and the app was full of it.
The semantic three go LIGHTER for dark so a warning still reads on a dark panel — right for
the fill, fatal for the ink: white on the dark theme's green measures 2.49:1, on its red
2.92:1, on its amber 2.25:1. Measured on the kiosk, 11-Sep-2026, thirteen separate places.
So the ink gets its own token and flips WITH the fill, exactly as --btn-primary-bg /
--btn-primary-ink already do. Light: white (5.4 / 5.3 / 5.7). Dark: a near-black of the same
hue (6.7 / 6.3 / 8.0). */
--on-good: #fff;
--on-bad: #fff;
--on-warn: #fff;
--r: 10px;
--r-lg: 15px;
--font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* ⛔ DISPLAY ONLY. Caprasimo is a fat display face — unreadable at 12px, wrong on a button. It is
spent on a page's own name and on sheet / drawer titles, and nowhere else. */
--font-display: "Caprasimo", Georgia, "Times New Roman", serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
/* ── THE TWO FACES, VENDORED (owner, 13-Sep-2026) ──────────────────────────────────────────────
He chose the round-2 design's faces over the system stack. They are served from `webapp/fonts/`
and NOT from Google, because this plant works with its internet down, and a heading that
silently falls back to Arial on the one morning the line is stopped is not a trade worth
making. 53 KB for all four subsets; Figtree is a single variable file covering 400–700.
⛔ THEY LIVE HERE, NOT IN ui.css. Every console loads this file; only two load `ui.css`. A face
the whole suite is set in has to be declared where the whole suite can see it.
`font-display: swap` so the words are readable while the face is still arriving, never blank. */
@font-face {
font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("fonts/figtree-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("fonts/figtree-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/caprasimo-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/caprasimo-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--field: #1f1a16;
--bg: #1a1714; --surface: #241f1a; --surface-2: #2c2621; --sunk: #13100e;
--ink: #f4ece0; --ink-2: #d8cabb; --ink-3: #b5a494; --ink-4: #9c8b7c; /* 13-Sep, warm ramp: ink-3 6.77 on --surface, ink-4 4.98 on --surface and 5.44 on --bg */
--line: #3a3028; --line-2: #2c2521;
--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
--rail: #13100e; --rail-ink-2: #b5a494; --rail-on: rgba(255, 255, 255, .07);
--navy: #e0956a;
--blue: #e6a97f; --green: #a9bd84; --red: #f08a78; --red-2: #e2705c; --amber: #e0b256;
--red-bg: #2e1a16;
--green-bg: #232a1c;
--amber-bg: #2b2314;
--blue-bg: #2e2118;
--red-ln: #5a2c23;
--green-ln: #3d4a2e;
--amber-ln: #4e3f1d;
--blue-ln: #5b3a24;
--btn-primary-bg: #e0956a; --btn-primary-ink: #2a1408;
--on-good: #1b2010; --on-bad: #2f0d07; --on-warn: #2a1e05;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--field: #1f1a16;
--bg: #1a1714; --surface: #241f1a; --surface-2: #2c2621; --sunk: #13100e;
--ink: #f4ece0; --ink-2: #d8cabb; --ink-3: #b5a494; --ink-4: #9c8b7c; /* 13-Sep, warm ramp: ink-3 6.77 on --surface, ink-4 4.98 on --surface and 5.44 on --bg */
--line: #3a3028; --line-2: #2c2521;
--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
--rail: #13100e; --rail-ink-2: #b5a494; --rail-on: rgba(255, 255, 255, .07);
--navy: #e0956a;
--blue: #e6a97f; --green: #a9bd84; --red: #f08a78; --red-2: #e2705c; --amber: #e0b256;
--red-bg: #2e1a16;
--green-bg: #232a1c;
--amber-bg: #2b2314;
--blue-bg: #2e2118;
--red-ln: #5a2c23;
--green-ln: #3d4a2e;
--amber-ln: #4e3f1d;
--blue-ln: #5b3a24;
--btn-primary-bg: #e0956a; --btn-primary-ink: #2a1408;
--on-good: #1b2010; --on-bad: #2f0d07; --on-warn: #2a1e05;
}
/* ── The names other stylesheets already spend, pointed at the canonical ones ───────────────
⛔ MEASURED, NOT INVENTED. Fourteen pages use a custom property that NOTHING in the files they
load ever defines — so `background: var(--card)` painted transparent, and `color: var(--accent)`
inherited whatever was above it. It is the same fault admin.css's own note records for
`--red-bg`, repeated across the suite.
Aliases rather than new colours, because two vocabularies grew up here — `--surface/--blue/
--green` in the Settings family, `--card/--primary/--done` in the planner family — and picking
a winner would mean rewriting a thousand rules in one go. Pointing one at the other makes both
correct today, in BOTH themes, and any file can migrate to the canonical name later without a
single visible change.
⛔ Every alias is `var(--canonical)`, never a copied hex: a copy is a colour that stays light
when the theme goes dark. */
:root {
--card: var(--surface); /* planner / ppc / inventory say "card" for a panel */
--panel-2: var(--surface-2);
--bg-1: var(--bg);
--accent: var(--blue); /* the one colour a screen leans on */
--bad: var(--red);
--ln: var(--line);
/* ── the KIOSK's vocabulary (style.css), pointed at the canonical names ──────────────────
Added 11-Sep-2026 with the kiosk redesign the owner commissioned. style.css carried its own
dark-only `:root` — which is why the shop floor was the one surface that could not follow a
theme at all: its private block simply outranked this file. Aliasing the names here lets that
block be deleted, so the kiosk inherits light-as-base and the dark override like every other
screen, and `--muted` finally means the same grey on the floor as it does in HR.
⛔ Aliases, never copied hexes — a copy is a colour that stays light when the theme goes dark.
The six `--role-*` identity colours stay in style.css: they are identity, not theme. */
--panel: var(--surface);
--panel2: var(--surface-2);
--txt: var(--ink);
--muted: var(--ink-3); /* the same choice hrms.css already made — one grey, one meaning */
--accent2: var(--navy); /* primary-button hover / pressed */
--ok: var(--green); --okbg: var(--green-bg);
--fail: var(--red); --failbg: var(--red-bg);
--warn: var(--amber); --warnbg: var(--amber-bg);
--radius: var(--r-lg);
--r-sm: 8px;
--r-md: var(--r);
--elev-1: var(--shadow);
--elev-2: var(--shadow-lg);
/* Mixed at paint time so the ring follows the accent into dark instead of staying the light
blue a copied rgba() would have frozen it at. */
--focus: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent);
}
/* The page's own ground — on , and at the LOWEST specificity there is.
⛔ THIS WAS WRITTEN AS `html[data-theme] body { background: var(--bg) }` AND IT WAS A BULLDOZER.
That selector outranks every app's own `body{background:…}`, so the Import desk's warm paper
(#f5f3ed, a deliberate identity, not an accident) was replaced by the suite's cool grey the
moment anybody picked a theme. Caught by opening that desk, not by reading this file.
On instead: a page that sets its own body background paints straight over this, and a
page that sets none still gets a correct ground instead of the browser's white in dark. */
html { background: var(--bg); color: var(--ink); }
/* The fields a person types into — at ZERO specificity, so it can never be a bulldozer.
⛔ Most stylesheets here say `input { color: var(--ink) }` and never give the box a background,
so the browser's own white showed through — in dark, under text that had just turned light.
`:where()` weighs nothing: any page rule that names a background (`.search input
{ background: transparent }`, a kiosk keypad, a printed form) still wins outright. This only
fills the gap where a page said nothing, which is exactly where the white was coming from. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
[type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
select, textarea) {
background-color: var(--field);
color: var(--ink);
}