/* EI "Ink & Paper" design tokens (docs/ops/ei-ui-audit-2026-10-09/design).
 * The only file in EI that holds a colour, radius, font size, shadow or spacing value;
 * everything else writes var(--ei-...). Loaded on Desk (app_include_css), on website
 * pages (web_include_css) and in the HUD / proof / track bundle (public.css).
 */

:root {
	--ei-ink-900: #0b1220;
	--ei-ink-700: #344054;
	--ei-ink-500: #667085;
	/* Disabled text only; placeholders use ink-500 (4.97:1 on white). */
	--ei-ink-400: #98a2b3;
	--ei-line-300: #d0d5dd;
	--ei-line-200: #e4e7ec;
	--ei-canvas: #f6f7f9;
	--ei-surface: #ffffff;
	--ei-subtle: #f9fafb;
	--ei-accent: #1d3fbb;
	--ei-accent-hover: #16309a;
	--ei-accent-soft: #eef2fd;
	/* Text on the accent or on the Rush tag: white in both themes. */
	--ei-on-accent: #ffffff;
	/* Focus: a 1px accent line (8.46:1 on white) carries the contrast; the 4px halo is decorative. */
	--ei-focus: 0 0 0 1px var(--ei-accent), 0 0 0 4px rgba(29, 63, 187, 0.28);
	--ei-rush: #c2410c;
	/* The Rush colour as text (a late date): the tag colour in light, the wall's late tone in dark. */
	--ei-rush-ink: var(--ei-rush);
	/* The dimmed page behind a modal panel. */
	--ei-scrim: rgba(11, 18, 32, 0.4);
	/* Interactive control borders: 4.97:1 on white, so a control's edge meets WCAG 1.4.11 (3:1). */
	--ei-line-ctl: var(--ei-ink-500);

	--ei-s-wait-bg: #fff4e0;
	--ei-s-wait-fg: #8a4b00;
	--ei-s-wait-bd: #f3d6a6;
	--ei-s-rel-bg: #e8eefc;
	--ei-s-rel-fg: #1d3fbb;
	--ei-s-rel-bd: #c6d3f5;
	--ei-s-prod-bg: #efe9fb;
	--ei-s-prod-fg: #5a2fb0;
	--ei-s-prod-bd: #d8cbf3;
	--ei-s-qc-bg: #e3f4f7;
	--ei-s-qc-fg: #0b6577;
	--ei-s-qc-bd: #bfe2e9;
	--ei-s-ready-bg: #e5f4ea;
	--ei-s-ready-fg: #1a6b3d;
	--ei-s-ready-bd: #bfe2cc;
	--ei-s-hold-bg: #fde8e8;
	--ei-s-hold-fg: #a3161d;
	--ei-s-hold-bd: #f4c3c5;
	--ei-s-neu-bg: #f2f4f7;
	--ei-s-neu-fg: #475467;
	--ei-s-neu-bd: #e4e7ec;
	/* A status's colour mark (column squares): the deep tone in light, the light edge tone in dark. */
	--ei-s-wait-mark: var(--ei-s-wait-fg);
	--ei-s-rel-mark: var(--ei-s-rel-fg);
	--ei-s-prod-mark: var(--ei-s-prod-fg);
	--ei-s-qc-mark: var(--ei-s-qc-fg);
	--ei-s-ready-mark: var(--ei-s-ready-fg);
	--ei-s-hold-mark: var(--ei-s-hold-fg);
	--ei-s-neu-mark: var(--ei-s-neu-fg);

	--ei-r-ctl: 6px;
	--ei-r-card: 10px;
	--ei-sh-card: 0 1px 2px rgba(16, 24, 40, 0.05);
	--ei-sh-pop: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);

	--ei-fs-xs: 12px;
	--ei-fs-sm: 13px;
	--ei-fs-md: 14px;
	--ei-fs-lg: 16px;
	--ei-fs-xl: 20px;
	--ei-fs-2xl: 24px;
	--ei-fs-3xl: 32px;

	--ei-space-1: 4px;
	--ei-space-2: 8px;
	--ei-space-3: 12px;
	--ei-space-4: 16px;
	--ei-space-5: 20px;
	--ei-space-6: 24px;
	--ei-space-7: 32px;
	--ei-space-8: 48px;

	/* Inter ships with Frappe, so nothing new loads. */
	--ei-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ei-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

	/* The shop wall only (dark by design, in both Desk themes). */
	--ei-wall-bg: #0b0d10;
	--ei-wall-fg: #f2f1ec;
	--ei-wall-dim: #a3a7ae;
	--ei-wall-line: #1d2026;
	--ei-wall-head: #7d828b;
	--ei-wall-line-strong: #262a31;
	--ei-wall-why: #ff9c9c;
	--ei-wall-late: #ff8f6b;
	--ei-wall-live: #7fd39b;
	--ei-wall-hold-tint: rgba(255, 90, 90, 0.06);
	--ei-wall-wait: #ffb547;
	--ei-wall-rel: #6f8cff;
	--ei-wall-prod: #b48cff;
	--ei-wall-qc: #4fd1e0;
	--ei-wall-ready: #43c46e;
	--ei-wall-hold: #ff6b6b;
	--ei-wall-neu: #7d828b;
	/* The wall's own type scale (prototype "Shop wall"), read from across the shop floor. */
	--ei-wall-fs-item: 17px;
	--ei-wall-fs-num: 26px;
	--ei-wall-fs-clock: 40px;
	--ei-wall-fs-title: 44px;
	/* The status square on the wall. */
	--ei-wall-r-mark: 3px;
}

/* Desk dark mode is a per-user choice (User.desk_theme). The neutral tokens and the
 * accent follow Frappe's own dark palette there so EI text, links and cards stay
 * legible; the status pills, Rush tag and wall keep their fixed pairs. */
html[data-theme="dark"] {
	--ei-accent: var(--ink-blue-7);
	--ei-accent-hover: var(--ink-blue-8);
	--ei-ink-900: var(--ink-gray-9);
	--ei-ink-700: var(--ink-gray-7);
	--ei-ink-500: var(--ink-gray-6);
	--ei-ink-400: var(--ink-gray-4);
	--ei-line-300: var(--outline-gray-2);
	--ei-line-200: var(--outline-gray-1);
	--ei-canvas: var(--surface-base);
	--ei-surface: var(--surface-gray-1);
	--ei-subtle: var(--surface-gray-2);
	--ei-accent-soft: var(--surface-blue-2);
	/* The deep status tones and the Rush red vanish on a dark card; use their light partners. */
	--ei-rush-ink: var(--ei-wall-late);
	--ei-s-wait-mark: var(--ei-s-wait-bd);
	--ei-s-rel-mark: var(--ei-s-rel-bd);
	--ei-s-prod-mark: var(--ei-s-prod-bd);
	--ei-s-qc-mark: var(--ei-s-qc-bd);
	--ei-s-ready-mark: var(--ei-s-ready-bd);
	--ei-s-hold-mark: var(--ei-s-hold-bd);
	--ei-s-neu-mark: var(--ei-s-neu-bd);
}

/* Desk chrome in the light theme adopts the tokens through Frappe 16's own variables
 * (frappe/public/css/espresso/{colors,legacy,radius,effects}.css). Scoped to the root
 * element in the light theme only, so Frappe's dark theme is left as Frappe ships it. */
html[data-theme="light"] {
	/* Surfaces: Frappe 16 lays forms and lists flat on --bg-color, so the page stays
	 * white; the canvas tone goes to the sidebar, as in the prototype. */
	--bg-color: var(--ei-surface);
	--fg-color: var(--ei-surface);
	--card-bg: var(--ei-surface);
	--modal-bg: var(--ei-surface);
	--popover-bg: var(--ei-surface);
	--navbar-bg: var(--ei-surface);
	--surface-sidebar: var(--ei-canvas);
	--sidebar-select-color: var(--ei-surface);
	--control-bg: var(--ei-canvas);
	--subtle-fg: var(--ei-subtle);
	--subtle-accent: var(--ei-subtle);
	--fg-hover-color: var(--ei-subtle);
	--highlight-color: var(--ei-subtle);

	/* Ink */
	--ink-gray-9: var(--ei-ink-900);
	--ink-gray-8: var(--ei-ink-900);
	--ink-gray-7: var(--ei-ink-700);
	--ink-gray-6: var(--ei-ink-700);
	--ink-gray-5: var(--ei-ink-500);
	--ink-gray-4: var(--ei-ink-500);
	--ink-gray-3: var(--ei-ink-400);
	--text-color: var(--ei-ink-900);
	--heading-color: var(--ei-ink-900);
	--text-muted: var(--ei-ink-700);
	--text-light: var(--ei-ink-500);
	--disabled-text-color: var(--ei-ink-400);
	--placeholder-color: var(--ei-ink-500);

	/* Lines */
	--outline-gray-1: var(--ei-line-200);
	--outline-gray-2: var(--ei-line-300);
	--border-color: var(--ei-line-200);
	--table-border-color: var(--ei-line-200);
	--dark-border-color: var(--ei-line-300);
	--btn-group-border-color: var(--ei-line-300);

	/* The one accent */
	--primary: var(--ei-accent);
	--btn-primary: var(--ei-accent);
	--ink-blue-link: var(--ei-accent);

	/* Two radii: controls and cards */
	--radius-sm: var(--ei-r-ctl);
	--radius: var(--ei-r-ctl);
	--radius-1: var(--ei-r-ctl);
	--radius-2: var(--ei-r-ctl);
	--radius-3: var(--ei-r-ctl);
	--radius-4: var(--ei-r-ctl);
	--radius-md: var(--ei-r-card);
	--radius-lg: var(--ei-r-card);
	--radius-xl: var(--ei-r-card);
	--radius-2xl: var(--ei-r-card);
	--radius-5: var(--ei-r-card);
	--radius-6: var(--ei-r-card);
	--radius-7: var(--ei-r-card);
	--radius-8: var(--ei-r-card);

	/* Two shadows: a hairline lift and a real one */
	--shadow-sm: var(--ei-sh-card);
	--card-shadow: var(--ei-sh-card);
	--btn-shadow: var(--ei-sh-card);
	--shadow-md: var(--ei-sh-pop);
	--shadow-lg: var(--ei-sh-pop);
	--shadow-xl: var(--ei-sh-pop);
	--shadow-2xl: var(--ei-sh-pop);
	--modal-shadow: var(--ei-sh-pop);

	/* Focus */
	--focus-default: var(--ei-focus);
	--focus-outline-default: 2px solid var(--ei-accent);
}

/* Bootstrap compiles these four as literals in 16.51, so no variable reaches them.
 * NFR-016 needs a visible focus ring; these are the only Desk component rules here. */
html[data-theme="light"] .form-control:focus {
	border-color: var(--ei-accent);
	box-shadow: var(--ei-focus);
}
html[data-theme="light"] .btn:focus-visible {
	border-color: var(--ei-accent);
	box-shadow: var(--ei-focus);
}
html[data-theme="light"] .form-control::placeholder {
	color: var(--ei-ink-500);
}
html[data-theme="light"] .btn-primary:hover {
	background-color: var(--ei-accent-hover);
}

/* NFR-A001 A3: Frappe's dock marks the open app with a 1.3:1 tint alone; the active tile of
 * the Express Imaging dock also carries a control edge. */
.dock .dock-item.active {
	border: 1px solid var(--ei-line-ctl);
}

/* NFR-A001 A1: Frappe's avatar initials (desk/avatar.scss) fall under 4.5:1 for most hues
 * (dark green 3.81:1, light yellow 1.73:1). Each failing pair moves to the far end of the
 * same hue on Frappe's own scale (>= 5.8:1 light, >= 6.0:1 dark); passing pairs are kept. */
html[data-theme="light"] {
	--avatar-frame-color: var(--gray-700);
	--orange-avatar-color: var(--orange-800);
	--pink-avatar-color: var(--pink-800);
	--blue-avatar-color: var(--blue-800);
	--red-avatar-color: var(--red-800);
	--yellow-avatar-color: var(--yellow-800);
	--purple-avatar-color: var(--purple-800);
}
html[data-theme="dark"] {
	--avatar-frame-color: var(--gray-200);
	--orange-avatar-bg: var(--orange-700);
	--orange-avatar-color: var(--orange-50);
	--pink-avatar-bg: var(--pink-700);
	--blue-avatar-bg: var(--blue-700);
	--green-avatar-bg: var(--green-700);
	--green-avatar-color: var(--green-50);
	--dark-green-avatar-bg: var(--green-700);
	--dark-green-avatar-color: var(--green-50);
	--yellow-avatar-bg: var(--yellow-700);
}

/* Frappe's .es-badge (list-view indicators take only a theme name) reads its colours from
 * per-theme variables; point them at the matching status tone. Variables only. */
html[data-theme="light"] .es-badge[data-theme="amber"],
html[data-theme="light"] .es-badge[data-theme="orange"],
html[data-theme="light"] .es-badge[data-theme="yellow"] {
	--c-fill: var(--ei-s-wait-bg);
	--c-fg: var(--ei-s-wait-fg);
	--c-line: var(--ei-s-wait-bd);
	--c-solid-bg: var(--ei-s-wait-fg);
	--c-solid-fg: var(--ei-on-accent);
}
html[data-theme="light"] .es-badge[data-theme="blue"] {
	--c-fill: var(--ei-s-rel-bg);
	--c-fg: var(--ei-s-rel-fg);
	--c-line: var(--ei-s-rel-bd);
	--c-solid-bg: var(--ei-s-rel-fg);
	--c-solid-fg: var(--ei-on-accent);
}
html[data-theme="light"] .es-badge[data-theme="purple"],
html[data-theme="light"] .es-badge[data-theme="violet"],
html[data-theme="light"] .es-badge[data-theme="pink"] {
	--c-fill: var(--ei-s-prod-bg);
	--c-fg: var(--ei-s-prod-fg);
	--c-line: var(--ei-s-prod-bd);
	--c-solid-bg: var(--ei-s-prod-fg);
	--c-solid-fg: var(--ei-on-accent);
}
html[data-theme="light"] .es-badge[data-theme="cyan"],
html[data-theme="light"] .es-badge[data-theme="light-blue"] {
	--c-fill: var(--ei-s-qc-bg);
	--c-fg: var(--ei-s-qc-fg);
	--c-line: var(--ei-s-qc-bd);
	--c-solid-bg: var(--ei-s-qc-fg);
	--c-solid-fg: var(--ei-on-accent);
}
html[data-theme="light"] .es-badge[data-theme="green"] {
	--c-fill: var(--ei-s-ready-bg);
	--c-fg: var(--ei-s-ready-fg);
	--c-line: var(--ei-s-ready-bd);
	--c-solid-bg: var(--ei-s-ready-fg);
	--c-solid-fg: var(--ei-on-accent);
}
html[data-theme="light"] .es-badge[data-theme="red"] {
	--c-fill: var(--ei-s-hold-bg);
	--c-fg: var(--ei-s-hold-fg);
	--c-line: var(--ei-s-hold-bd);
	--c-solid-bg: var(--ei-s-hold-fg);
	--c-solid-fg: var(--ei-on-accent);
}
html[data-theme="light"] .es-badge[data-theme="gray"],
html[data-theme="light"] .es-badge[data-theme="grey"],
html[data-theme="light"] .es-badge[data-theme="darkgrey"],
html[data-theme="light"] .es-badge:not([data-theme]) {
	--c-fill: var(--ei-s-neu-bg);
	--c-fg: var(--ei-s-neu-fg);
	--c-line: var(--ei-s-neu-bd);
	--c-solid-bg: var(--ei-s-neu-fg);
	--c-solid-fg: var(--ei-on-accent);
}

/* The one status component (prototype .pill): always a word, never colour alone. */
.ei-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 var(--ei-space-2);
	border-radius: var(--ei-r-ctl);
	font: 500 var(--ei-fs-xs) / 1 var(--ei-font);
	white-space: nowrap;
	background: var(--ei-status-bg);
	color: var(--ei-status-fg);
	box-shadow: inset 0 0 0 1px var(--ei-status-bd);
}
.ei-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ei-status-fg);
}
.ei-status--wait { --ei-status-bg: var(--ei-s-wait-bg); --ei-status-fg: var(--ei-s-wait-fg); --ei-status-bd: var(--ei-s-wait-bd); }
.ei-status--rel { --ei-status-bg: var(--ei-s-rel-bg); --ei-status-fg: var(--ei-s-rel-fg); --ei-status-bd: var(--ei-s-rel-bd); }
.ei-status--prod { --ei-status-bg: var(--ei-s-prod-bg); --ei-status-fg: var(--ei-s-prod-fg); --ei-status-bd: var(--ei-s-prod-bd); }
.ei-status--qc { --ei-status-bg: var(--ei-s-qc-bg); --ei-status-fg: var(--ei-s-qc-fg); --ei-status-bd: var(--ei-s-qc-bd); }
.ei-status--ready { --ei-status-bg: var(--ei-s-ready-bg); --ei-status-fg: var(--ei-s-ready-fg); --ei-status-bd: var(--ei-s-ready-bd); }
.ei-status--hold { --ei-status-bg: var(--ei-s-hold-bg); --ei-status-fg: var(--ei-s-hold-fg); --ei-status-bd: var(--ei-s-hold-bd); }
.ei-status--neu { --ei-status-bg: var(--ei-s-neu-bg); --ei-status-fg: var(--ei-s-neu-fg); --ei-status-bd: var(--ei-s-neu-bd); }

/* The Rush tag. The prototype draws it at 5px and 10.5px; the two-radii rule and the
 * font-size scale make it the control radius and the smallest size. */
.ei-rush {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	border-radius: var(--ei-r-ctl);
	background: var(--ei-rush);
	color: var(--ei-on-accent);
	font: 600 var(--ei-fs-xs) / 1 var(--ei-font);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The Job and Work Package summary strip (ei_job.js summary_strip): four facts before the fields. */
.ei-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--ei-space-4);
	background: var(--ei-surface); border: 1px solid var(--ei-line-200); border-radius: var(--ei-r-card); box-shadow: var(--ei-sh-card); }
.ei-summary > div { display: grid; gap: var(--ei-space-1); align-content: start; min-width: 0;
	padding: var(--ei-space-3) var(--ei-space-4); border-left: 1px solid var(--ei-line-200); }
.ei-summary > div:first-child { border-left: 0; }
.ei-summary dt { font-size: var(--ei-fs-xs); font-weight: 500; color: var(--ei-ink-700); }
.ei-summary dd { margin: 0; font-size: var(--ei-fs-md); font-weight: 500; color: var(--ei-ink-900);
	font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ei-summary dd.ei-summary-big { font-size: var(--ei-fs-xl); font-weight: 600; }
.ei-summary dd.ei-summary-muted { color: var(--ei-ink-500); font-weight: 400; }
.ei-summary dd.ei-summary-mono { font-family: var(--ei-mono); }
@media (max-width: 760px) {
	.ei-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ei-summary > div:nth-child(3) { border-left: 0; }
	.ei-summary > div:nth-child(n+3) { border-top: 1px solid var(--ei-line-200); }
}