/* ═══════════════════════════════════════════════════════════
VMG · Portal Tokens
Portal-scoped UI primitives. Sits ALONGSIDE vmg-tokens.css.
vmg-tokens.css is the shared source of truth and stays
portable to voodoomediagroup.com — do NOT add these primitives
there. This file carries the things the portal needs that the
marketing site does not: radius scale, elevation, focus ring,
and the success/warning semantic colors.
USAGE
Load order matters — this file references --obsidian,
--hex-violet, --alert-red, --ink-* and --space-* from
vmg-tokens.css.
NOTES
• Palette additions follow the parent file's pattern: HEX
first, OKLCH second. Legacy browsers stop at the hex;
modern browsers take the wider-gamut OKLCH (last valid
wins). Preserve this if you extend.
═══════════════════════════════════════════════════════════ */
:root {
/* ─────────────────────────────────────────────────────────
BORDER RADIUS
Kept tight. JetBrains Mono labels are hard-edged; large
radii would fight that. --radius-full for pills and dots.
───────────────────────────────────────────────────────── */
--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
Dark UI: lift reads more from border than shadow. Shadows
stay low-opacity. Elevation 0 is the resting card — flat,
bordered with --border-color from the parent file.
───────────────────────────────────────────────────────── */
--elev-0: none;
--elev-1: 0 1px 2px rgba(5, 4, 38, 0.40);
--elev-2: 0 2px 8px rgba(5, 4, 38, 0.45);
--elev-3: 0 8px 24px rgba(5, 4, 38, 0.50);
/* ─────────────────────────────────────────────────────────
SEMANTIC STATUS · success / warning
vmg-tokens.css carries --alert-red. The portal needs green
and amber for subscription, invoice, and request states.
Each status gets three tokens:
--status text-safe hue, for icons and badge text
--status-fill muted background for badges / status rows
--status-border hairline for the same
HEX first, OKLCH second — same dual-declaration as parent.
───────────────────────────────────────────────────────── */
/* success · active / paid / open */
--success: #3ECF8E;
--success: oklch(76% 0.149 159);
--success-fill: rgba(62, 207, 142, 0.12);
--success-fill: oklch(76% 0.149 159 / 0.12);
--success-border: rgba(62, 207, 142, 0.30);
--success-border: oklch(76% 0.149 159 / 0.30);
/* warning · past-due / expiring / needs attention */
--warning: #E0A82E;
--warning: oklch(76% 0.135 78);
--warning-fill: rgba(224, 168, 46, 0.12);
--warning-fill: oklch(76% 0.135 78 / 0.12);
--warning-border: rgba(224, 168, 46, 0.30);
--warning-border: oklch(76% 0.135 78 / 0.30);
/* danger · failed / cancelled — aliased to the parent token,
not redefined. Fill/border derived to match success/warning
so all three status families share one badge shape. */
--danger: var(--alert-red);
--danger-fill: rgba(229, 72, 77, 0.12);
--danger-fill: oklch(63% 0.19 25 / 0.12);
--danger-border: rgba(229, 72, 77, 0.30);
--danger-border: oklch(63% 0.19 25 / 0.30);
/* status-neutral · closed / informational / inactive — built on the
ink ramp so it reads as quiet rather than as a status. Renamed from
--neutral to avoid clashing with the ACSS --neutral color slot
(which is mapped to --ink-100 in the ACSS config). */
--status-neutral: var(--ink-50);
--status-neutral-fill: var(--ink-08);
--status-neutral-border: var(--ink-15);
/* ─────────────────────────────────────────────────────────
LINK · accessible sapphire
Brand link color is Sapphire (--sapphire #215BA6), but at body
size on --obsidian it lands ~3:1 (fails WCAG AA). This lightened
variant clears AA (~5.9:1 on --obsidian) while staying recognizably
sapphire. The dark-scheme bridge uses it for --link-color.
───────────────────────────────────────────────────────── */
--sapphire-light: #4F8FD6;
/* ─────────────────────────────────────────────────────────
FOCUS RING
One ring for every keyboard focus in the portal — Bricks
pages and Phase 2 PHP templates alike. Two-layer box-shadow:
inner ring matches --obsidian to punch a gap, outer ring is
the brand violet. accent-color in vmg-tokens.css 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(--obsidian),
0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--hex-violet);
}
/* ─────────────────────────────────────────────────────────────
FOCUS-VISIBLE DEFAULT
Applied once so the whole portal shares one ring. Scoped with
:where() for zero specificity — any component can override
without a specificity fight.
───────────────────────────────────────────────────────────── */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}