/* ============================================================
ERPForce Design System v2.0 — Foundations layer (Stage 2A)
────────────────────────────────────────────────────────────
Loads AFTER tokens.css, BEFORE components.css / v1-redesigned.css
/ responsive.css. Adds the layers Stage 1 audit
flagged: full dark-mode coverage, HC stub, density modes, RTL
helpers, container-query containment, and the namespace scoping
contract for product-CSS co-existence.
Nothing here resets or overrides geometry — it adds capabilities
on top of what tokens.css already establishes.
============================================================ */
/* ─────────────────────────────────────────────────────────────
1. Namespace contract — `.ef-root`
─────────────────────────────────────────────────────────────
Decision (2A): `.ef-root` scoping over `ef-*` per-class prefix.
Why: existing v2 atoms use generic names (.btn, .input, .card,
.tbl, .tab) that collide with virtually every product CSS
reset/utility we'll encounter. Renaming all of them is hundreds
of files of churn for marginal benefit — a single root scope
gives the same isolation with one DOM-level change in the live
product. Trade-off documented in docs/foundations.md.
Integration: live product wraps its app shell with
— preferred
or …
— local scope
Container-query support is also activated here so composites
embedded in side panels respond to *their* width, not viewport.
───────────────────────────────────────────────────────────── */
.ef-root {
/* Establish a containment context for `cq-*` units. */
container-type: inline-size;
container-name: ef-root;
/* Forward primary surface so the root behaves like a page. */
color: var(--text-primary);
background: var(--surface-canvas);
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
/* All descendants inherit the box model we expect. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Composite wrappers that need their own container context
(table-in-drawer, kanban-in-panel, smart-inbox-in-side-panel).
Composites add `.ef-cq` to opt in without changing root. */
.ef-cq,
.ax-tbl-wrap,
.si-grid,
.kb-board,
.fd-grid,
.tm-list,
.at-grid,
.cf-bottom,
.rcp-row,
.pv-tbl {
container-type: inline-size;
}
/* ─────────────────────────────────────────────────────────────
2. Dark-mode — full coverage (semantic + AI + tags + scale)
─────────────────────────────────────────────────────────────
tokens.css already overrides surfaces, borders, text, and
`--text-brand`. The audit flagged that semantic, AI, and tag
tokens were NOT overridden — every coloured pill in dark mode
reuses light-mode bgs over a dark surface. Fix here.
Strategy: keep hue/saturation, drop lightness ~25–35 pts on bgs,
keep fg readable on the new bg, retune fg-strong for contrast.
───────────────────────────────────────────────────────────── */
.dark {
/* Semantic — softer bgs, lifted fgs (success teal-shifted off brand) */
--success: #4FD0AE;
--success-bg: #0C3A2F;
--success-bg-strong: #155547;
--success-fg-strong: #B8EDDB;
--warning: #E0A258;
--warning-bg: #3B2710;
--warning-bg-strong: #5C3D1A;
--warning-fg-strong: #FCDFB1;
--danger: #E07A7E;
--danger-bg: #3A1418;
--danger-bg-strong: #5A1F25;
--danger-fg-strong: #F5C7CB;
--info: #7DA6E8;
--info-bg: #142239;
--info-bg-strong: #1E3358;
--info-fg-strong: #CDDDF3;
/* Neutral semantic */
--neutral-bg: var(--surface-active);
--neutral-fg: var(--text-secondary);
/* AI accent */
--ai-fg: #B3A0F2;
--ai-bg: #251A47;
--ai-bg-strong: #382867;
--ai-fg-deep: #9C82E8;
--ai-on-fill: #0B0814;
/* Tags — 8 hues, dark-balanced */
--tag-slate-bg: #25272C; --tag-slate-fg: #B6BABF;
--tag-green-bg: #14392A; --tag-green-fg: #A7DEC2;
--tag-blue-bg: #142239; --tag-blue-fg: #9DBAE6;
--tag-purple-bg: #251A47; --tag-purple-fg: #C2B0F0;
--tag-amber-bg: #3B2710; --tag-amber-fg: #E0BA85;
--tag-rose-bg: #3A1418; --tag-rose-fg: #ECABB1;
--tag-teal-bg: #103935; --tag-teal-fg: #A5D8D3;
--tag-pink-bg: #3A1A2D; --tag-pink-fg: #E5A8C6;
/* Overlay scrims — heavier so dark canvas still gets darkened */
--surface-overlay: rgba(0,0,0,0.48);
--surface-overlay-strong: rgba(0,0,0,0.68);
--surface-inverse: var(--n-0);
--text-on-inverse: var(--n-900);
/* Focus rings — same hue, lift opacity for dark canvas */
--shadow-focus: 0 0 0 3px rgba(109,203,157,.32);
--shadow-focus-ai: 0 0 0 3px rgba(179,160,242,.32);
--shadow-focus-danger: 0 0 0 3px rgba(224,122,126,.32);
--border-divider: var(--border-subtle);
}
/* ─────────────────────────────────────────────────────────────
3. High-contrast theme — palette derivation DONE (closeout 6.8 / L4)
─────────────────────────────────────────────────────────────
Selector + free overrides per the brief, PLUS the P1 palette
derivation: status / AI / brand / quaternary colours are snapped
to AAA (≥7:1, measured) and stay dark-aware by referencing the
already-dark-tuned `*-fg-strong` tokens. Borders → strong, focus
rings 4px, text ramp → primary, weights lifted.
Doubles as the user-selectable "outdoor mode" (foundations.md §11).
Activates on `.hc` OR `forced-colors: active` (Windows HC).
───────────────────────────────────────────────────────────── */
.hc {
--border-subtle: var(--border-strong);
--border-default: var(--border-strong);
--border-divider: var(--border-strong);
--text-secondary: var(--text-primary);
--text-tertiary: var(--text-primary);
--text-quaternary: var(--n-700); /* 10.39:1 — meta text stops being muted */
/* Palette derivation (P1) — status/AI/brand to AAA, measured on white.
Referencing *-fg-strong keeps these correct in .dark.hc automatically
(the dark fg-strong values clear AAA on the dark canvas). */
--success: var(--success-fg-strong); /* 8.94:1 light / 15.06 dark */
--warning: var(--warning-fg-strong); /* 10.58 / 15.21 */
--danger: var(--danger-fg-strong); /* 10.53 / 12.96 */
--info: var(--info-fg-strong); /* 10.86 / 14.19 */
--neutral-fg: var(--text-primary);
--ai-fg: #43278F; /* 10.91:1 on white */
--text-brand: var(--green-800); /* 9.88:1 on white */
--text-brand-strong: var(--green-800);
/* Focus = maximum-contrast outline, not a tinted ring */
--border-focus: var(--text-primary);
--border-focus-ai: var(--text-primary);
--border-focus-danger: var(--text-primary);
--shadow-focus: 0 0 0 4px currentColor;
--shadow-focus-ai: 0 0 0 4px currentColor;
--shadow-focus-danger: 0 0 0 4px currentColor;
--shadow-xs: none;
--shadow-sm: none;
--shadow-md: 0 0 0 1px var(--border-strong);
--fw-medium: 600; /* @kind font */
--fw-semibold: 700; /* @kind font */
}
/* Dark + HC: AI and brand text need light values to clear AAA on the dark
canvas (the semantic tokens above already self-correct via *-fg-strong). */
.dark.hc {
--ai-fg: #CDBEF7; /* 11.46:1 on dark canvas */
--text-brand: #6DCB9D; /* 9.95:1 */
--text-brand-strong: #6DCB9D;
}
@media (forced-colors: active) {
:root {
--border-subtle: var(--border-strong);
--border-default: var(--border-strong);
--border-divider: var(--border-strong);
--text-secondary: var(--text-primary);
--text-tertiary: var(--text-primary);
--shadow-focus: 0 0 0 4px currentColor;
--shadow-focus-ai: 0 0 0 4px currentColor;
--shadow-focus-danger: 0 0 0 4px currentColor;
--shadow-xs: none;
--shadow-sm: none;
--shadow-md: 0 0 0 1px var(--border-strong);
--fw-medium: 600; /* @kind font */
--fw-semibold: 700; /* @kind font */
}
}
/* ─────────────────────────────────────────────────────────────
4. Density plumbing — `[data-density]`
─────────────────────────────────────────────────────────────
Components consume `--h-control`, `--h-row`, `--pad-x`, `--pad-y`.
responsive.css already rewires these per viewport. Density mode
lets desktop users opt into compact/cozy explicitly — power-user
Finance/WMS density without changing viewport.
Naming: compact / comfortable / cozy. Confirmed in audit Q4.
Use on `` or `` (or `.ef-root`). Per-region override
works too: ``.
───────────────────────────────────────────────────────────── */
[data-density="compact"] {
--h-xs: 18px;
--h-sm: 22px;
--h-md: 24px;
--h-lg: 28px;
--h-control: 24px;
--h-control-sm: 22px;
--h-row: 26px;
--row-h: 26px;
--row-h-c: 24px;
--pad-x: 14px;
--pad-y: 10px;
--content-pad-x: 14px;
--content-pad-y: 10px;
}
[data-density="comfortable"] {
/* Desktop default — explicit selector lets components key off the
attribute even when it matches current defaults. */
--h-control: var(--h-md);
--h-control-sm: var(--h-sm);
--h-row: var(--row-h);
--pad-x: var(--content-pad-x);
--pad-y: var(--content-pad-y);
}
[data-density="cozy"] {
--h-xs: 28px;
--h-sm: 32px;
--h-md: 36px;
--h-lg: 40px;
--h-control: 36px;
--h-control-sm: 32px;
--h-row: 40px;
--row-h: 40px;
--row-h-c: 36px;
--pad-x: 24px;
--pad-y: 16px;
--content-pad-x: 24px;
--content-pad-y: 16px;
}
/* ─────────────────────────────────────────────────────────────
5. RTL foundation
─────────────────────────────────────────────────────────────
Activated via ``. The atoms in components.css
have been refactored to use logical properties (Stage 2A). The
composites in v1-redesigned.css were FLAGGED for Stage 4 — the
inline-axis logical-property conversion LANDED in Wave 3 (all 109
sites; box-shadow rails mirrored under [dir="rtl"]). The raw-px /
type-snap cleanup remains, tracked in
docs/foundations-px-leakage.md.
This section adds:
• `.num` — keeps Western digits LTR inside Arabic strings
• `.icon-rtl-flip` — utility for direction-indicating icons
(chevron, arrow) to mirror on RTL
• Mobile-nav-sheet migrated onto the .sheet--top primitive
(was physical top/left/right inset; now logical inset-block /
inset-inline + var(--z-*) tokens — see v2/responsive.css)
───────────────────────────────────────────────────────────── */
/* Western numerals inside RTL text — invoices, amounts, VAT IDs */
.num,
.t-num,
[data-bidi="num"] {
unicode-bidi: isolate;
direction: ltr;
font-variant-numeric: lining-nums tabular-nums;
}
/* Arabic script font application lives in tokens.css (:lang(ar),
.ef-root:lang(ar)) so it reaches previews that omit foundations.css. */
/* Mixed-direction table cells: Arabic vendor + Latin SKU + numerals.
Let the browser resolve runs per Unicode bidi (5.5). */
.bidi-cell { unicode-bidi: plaintext; }
/* Direction-bearing icons — mirror on RTL.
Use on chevrons, arrows, breadcrumb separators. NOT on logos,
stars, generic glyphs. */
[dir="rtl"] .icon-rtl-flip {
transform: scaleX(-1);
}
/* Convenience for icon-bearing buttons that should keep their
icon on the same logical side. Already works via flex `gap`
+ logical padding, but documented here for clarity. */
[dir="rtl"] .icon-leading,
[dir="rtl"] .icon-trailing {
/* No transform — flex order is naturally direction-aware. */
}
/* ─────────────────────────────────────────────────────────────
6. Print conventions stub (P1 — full sheet in Stage 4)
─────────────────────────────────────────────────────────────
Hooks for documents that must print clean: invoices, POs,
statements, payslips. responsive.css already has a @print
block for the showcase; this is the production hook.
───────────────────────────────────────────────────────────── */
@media print {
.ef-root {
background: #fff !important;
color: #000 !important;
}
/* Stripe coloured backgrounds from print unless explicitly opted in. */
.ef-root [data-print="exact"] {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* ─────────────────────────────────────────────────────────────
7. Forced-colors a11y pass
─────────────────────────────────────────────────────────────
Honour Windows High Contrast / forced-colors. Components must
keep their semantics readable when the user override kicks in.
───────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
.btn,
.pill,
.chip,
.input,
.input-shell,
.card {
forced-color-adjust: none;
border: 1px solid CanvasText;
}
}
/* ─────────────────────────────────────────────────────────────
8. Platform behaviour (graduated from audit-fixes bucket C, T3c)
─────────────────────────────────────────────────────────────
These are capabilities, not corrections — load-order-dependent
platform behaviour that belongs in the foundation layer, not in
an override file. Moved here verbatim when audit-fixes.css was
retired (gap-audit T3, Wave 5).
───────────────────────────────────────────────────────────── */
/* 8.1 — Button icon colour.
Button variants set their text colour but not their icon colour, so the
base `.btn svg { color: --text-tertiary }` in components.css would win.
`.ef-root .btn .btn__icon` (higher specificity) makes the icon inherit the
button's text colour. Outside `.ef-root` the variant rules handle it. */
.ef-root .btn .btn__icon { color: currentColor; }
/* 8.2 — Disabled states (audit 2.7). Two distinct kinds:
• [disabled] — natively inert; no interaction possible.
• [aria-disabled="true"] — LOOKS disabled but stays hoverable so a
"why" tooltip ("Requires Manager approval") can
show; the consumer intercepts the click in JS.
Never pointer-events:none here — that kills the
very tooltip the permission UI needs. */
.btn[disabled],
button[disabled] {
opacity: .42;
cursor: not-allowed;
pointer-events: none;
}
.btn[aria-disabled="true"],
button[aria-disabled="true"],
.nav-item[aria-disabled="true"],
.chip[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
/* pointer-events intentionally left auto so hover/tooltip works */
}
/* 8.3 — Honour reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}