/* ═══════════════════════════════════════════════════════════
MPD · Portal Tokens
Portal-scoped UI primitives. Sits ALONGSIDE mpd-tokens.css.
Carries what the portal needs beyond the brand palette: radius
scale, elevation, focus ring, accessible link color, and the
success/warning/danger status families — all tuned for the light
cream ground (the inverse of VMG's dark-tuned originals).
USAGE
Load order matters — references --surface, --accent, --alert-red,
--ink-* and --space-* from mpd-tokens.css.
NOTES
• HEX first, OKLCH second, same as the parent file.
═══════════════════════════════════════════════════════════ */
:root {
/* ─────────────────────────────────────────────────────────
BORDER RADIUS — kept tight; JetBrains Mono labels are hard-
edged and large radii would fight them.
───────────────────────────────────────────────────────── */
--radius-sm: 3px; /* badges, inputs, table cell accents */
--radius-md: 6px; /* cards, panels, buttons */
--radius-lg: 10px; /* dashboard region containers */
--radius-full: 999px; /* pills, avatar, status dots */
/* ─────────────────────────────────────────────────────────
ELEVATION
Light UI: warm-dark, low-opacity shadows on cream. Lift reads
from a soft shadow plus the --border-color hairline. Shadows
are tinted with the warm ink (rgb 45,40,33), never pure black —
black on cream reads cold and dead.
───────────────────────────────────────────────────────── */
--elev-0: none;
--elev-1: 0 1px 2px rgba(45, 40, 33, 0.08);
--elev-2: 0 3px 10px rgba(45, 40, 33, 0.10), 0 1px 2px rgba(45, 40, 33, 0.06);
--elev-3: 0 12px 32px rgba(45, 40, 33, 0.13), 0 2px 6px rgba(45, 40, 33, 0.07);
/* ─────────────────────────────────────────────────────────
SEMANTIC STATUS · success / warning / danger
Retuned so the base hue is AA-legible as TEXT on cream, with a
soft -fill and hairline -border drawn from the same hue.
--status text-safe hue (icons, badge text)
--status-fill muted background for badges / status rows
--status-border hairline for the same
───────────────────────────────────────────────────────── */
/* success · active / paid / open — a grounded green (not neon) */
--success: #2F7D4F;
--success: oklch(52% 0.108 152);
--success-fill: rgba(47, 125, 79, 0.10);
--success-fill: oklch(52% 0.108 152 / 0.10);
--success-border: rgba(47, 125, 79, 0.28);
--success-border: oklch(52% 0.108 152 / 0.28);
/* warning · past-due / expiring — deep ochre, kin to --accent-warm */
--warning: #9A6B1A;
--warning: oklch(52% 0.104 74);
--warning-fill: rgba(154, 107, 26, 0.10);
--warning-fill: oklch(52% 0.104 74 / 0.10);
--warning-border: rgba(154, 107, 26, 0.28);
--warning-border: oklch(52% 0.104 74 / 0.28);
/* danger · failed / cancelled — aliased to the parent --alert-red,
with fill/border derived to match the other status families. */
--danger: var(--alert-red);
--danger-fill: rgba(196, 54, 47, 0.10);
--danger-fill: oklch(52% 0.176 27 / 0.10);
--danger-border: rgba(196, 54, 47, 0.28);
--danger-border: oklch(52% 0.176 27 / 0.28);
/* status-neutral · closed / informational — built on the ink ramp
so it reads quiet rather than as a status. */
--status-neutral: var(--ink-50);
--status-neutral-fill: var(--ink-08);
--status-neutral-border: var(--ink-15);
/* ─────────────────────────────────────────────────────────
LINK · accessible terracotta
Brand accent is --accent (#C25A3C); at body size on cream it
lands ~3.7:1 (fails AA for text). This deepened terracotta
clears AA (~5:1 on --surface) while staying recognizably the
brand. Used for inline text links and table-row actions.
(was --sapphire-light in the VMG contract.)
───────────────────────────────────────────────────────── */
--link: #A8472C;
--link: oklch(50% 0.128 38);
--link-hover: var(--ink-100);
/* ─────────────────────────────────────────────────────────
FOCUS RING — one ring for every keyboard focus. Two-layer
box-shadow: inner ring matches --surface to punch a gap, outer
ring is --accent. accent-color (parent file) already covers
native control focus; this covers links, buttons, custom
elements, table-row actions.
───────────────────────────────────────────────────────── */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring: 0 0 0 var(--focus-ring-offset) var(--surface),
0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--accent);
}
/* ─────────────────────────────────────────────────────────────
FOCUS-VISIBLE DEFAULT — applied once, zero specificity via
:where(), so any component can override without a fight.
───────────────────────────────────────────────────────────── */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}