/* ============================================================================
   MetroLimo Sys — MLX design-token tier ("Obsidian & Gold", #mlx-redesign)
   ----------------------------------------------------------------------------
   ONE semantic layer between the 10 server-emitted --mls-* primitives (inline
   on the #mls-portal wrapper, from MLS_Public::theme_css_vars()) and every
   component rule in portal.css / console.css / mls.css. Loaded first on every
   surface: registered as a dependency of the 'mls-public' style handle.

   THE RULE: components never touch a raw hex again — they consume --mlx-*.
   Every token here derives from the --mls-* bases via color-mix(), so the
   operator's accent, the operator's font, and light/dark/AUTO theme modes all
   cascade automatically: auto mode swaps the --mls-* bases client-side via
   @media (prefers-color-scheme: dark) (.mls-theme-auto override tag) and this
   whole tier re-derives on the spot. That is why this tier is CSS, not PHP.

   Deliberate exceptions (design constants, NOT operator-themable):
   - Brand chrome — the sidebar/hero "dashboard" surfaces. As of #brand-theme these
     DERIVE from the operator's --mls-brand color (their site blue; blank → navy-blue
     #1E3A5F), so they carry the operator's brand in BOTH modes; they are brand, not
     content. chrome-ink/-mut stay light for legibility on the saturated brand surface.
   - --mlx-on-accent #1a1a1a — ink on accent fills, the codebase-wide
     convention (console.css active pills, portal buttons).
   - The 5 status seeds — semantic colors (ok/warn/danger/info/live); their
     TINTS adapt to mode via color-mix, the seeds themselves do not.

   Support posture: color-mix() is required (baseline 2023 — this codebase
   already ships it unguarded). Relative color syntax is banned. light-dark()
   appears ONLY on the 3 mode-structural tokens at the end of the block, each
   with a static both-modes-safe fallback declared first, and only works
   because theme_css_vars() now emits color-scheme (see class-mls-public.php).
   ========================================================================== */

/* Duotone icon system (#icons) — the platform-wide emoji replacement. Every icon
   is <svg class="mlx-ico">…</svg> with a subtle filled layer + a crisp outline,
   both currentColor so they inherit the surrounding accent/ink and read correctly
   in light, dark, and brand contexts. Sized by font-size (default 1em) so an icon
   always matches the text it sits beside; add width/height where a fixed size is
   wanted. Scoped globally (not to the token wrapper) so it works in wp-admin too. */
.mlx-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex:0 0 auto;overflow:visible}
.mlx-ico .mlx-ico-fill{fill:currentColor;opacity:.16;stroke:none}
.mlx-ico .mlx-ico-line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mls-portal, .mls-console, .mls-portal-app {
	/* ---- Surfaces & lines (direction-agnostic: mixing toward --mls-ink means
	   "more contrast than the card" in BOTH modes — darker in light, lighter in
	   dark; elevation therefore flips correctly with zero per-mode rules) ---- */
	--mlx-canvas:      color-mix(in srgb, var(--mls-bg, #ffffff) 96%, var(--mls-ink, #17181c) 4%);
	--mlx-surface-1:   var(--mls-card, #f7f7f5);
	--mlx-well:        color-mix(in srgb, var(--mls-card, #f7f7f5) 94%, var(--mls-ink, #17181c) 6%);
	--mlx-well-2:      color-mix(in srgb, var(--mls-card, #f7f7f5) 87%, var(--mls-ink, #17181c) 13%);
	--mlx-float:       var(--mls-popover-bg, #f7f7f5);
	--mlx-glass:       color-mix(in srgb, var(--mls-popover-bg, #f7f7f5) 82%, transparent);
	--mlx-line:        var(--mls-line, rgba(0,0,0,.28));
	--mlx-line-soft:   color-mix(in srgb, var(--mls-line, rgba(0,0,0,.28)) 55%, transparent);
	--mlx-ring:        color-mix(in srgb, var(--mls-ink, #17181c) 12%, transparent);

	/* ---- Ink ---- */
	--mlx-ink-hi:      var(--mls-ink, #17181c);
	--mlx-ink-lo:      var(--mls-mut, #5f6368);
	--mlx-ink-faint:   color-mix(in srgb, var(--mls-mut, #5f6368) 62%, transparent);
	--mlx-on-accent:   #1a1a1a;

	/* ---- Accent ramp (replaces the hand-tuned #c07d16/#b9832a scatter —
	   accent-ink mixes toward the local ink so it darkens to amber in light
	   mode and lifts to pale gold in dark mode, always text-safe) ---- */
	--mlx-accent:      var(--mls-accent, #F8B53F);
	--mlx-accent-ink:  color-mix(in srgb, var(--mls-accent, #F8B53F) 72%, var(--mls-ink, #17181c) 28%);
	--mlx-accent-soft: color-mix(in srgb, var(--mls-accent, #F8B53F) 12%, transparent);
	--mlx-accent-line: color-mix(in srgb, var(--mls-accent, #F8B53F) 45%, transparent);
	--mlx-accent-glow: color-mix(in srgb, var(--mls-accent, #F8B53F) 26%, transparent);

	/* ---- Brand chrome (#brand-theme) — NOW derived from the operator's --mls-brand
	   color (theme_css_vars emits it; blank → premium navy-blue #1E3A5F), so the
	   sidebar/appbar/hero carry the operator's actual site color instead of a fixed
	   charcoal navy. The 10% bg mix lifts it slightly in light and deepens it in dark;
	   chrome-2 is a lighter tier of the SAME brand (18% white) for elevation. The
	   chrome-ink/-mut are light so text stays legible on the brand color in both
	   modes (chrome is a saturated brand surface, not a content surface). ---- */
	--mlx-chrome:       color-mix(in srgb, var(--mls-brand, #1E3A5F) 90%, var(--mls-bg, #ffffff) 10%);
	--mlx-chrome-2:     color-mix(in srgb, var(--mls-brand, #1E3A5F) 82%, #ffffff 18%);
	--mlx-chrome-hover: color-mix(in srgb, #ffffff 14%, transparent);
	--mlx-chrome-ink:   #F2F5FB;
	--mlx-chrome-mut:   color-mix(in srgb, #F2F5FB 66%, transparent);

	/* ---- Status system: 5 fixed seeds + mode-adaptive derivations.
	   -ink for text/icons (readable on cards in both modes), -tint for pill
	   washes, -line for pill borders / row rails. ---- */
	--mlx-st-ok-seed:     #1FA562;
	--mlx-st-warn-seed:   #E39A2E;
	--mlx-st-danger-seed: #C6453C;
	--mlx-st-info-seed:   #3E7BFA;
	--mlx-st-live-seed:   #7C5CFC;
	--mlx-st-ok-ink:      color-mix(in srgb, var(--mlx-st-ok-seed) 70%, var(--mls-ink, #17181c) 30%);
	--mlx-st-ok-tint:     color-mix(in srgb, var(--mlx-st-ok-seed) 12%, transparent);
	--mlx-st-ok-line:     color-mix(in srgb, var(--mlx-st-ok-seed) 45%, transparent);
	--mlx-st-warn-ink:    color-mix(in srgb, var(--mlx-st-warn-seed) 70%, var(--mls-ink, #17181c) 30%);
	--mlx-st-warn-tint:   color-mix(in srgb, var(--mlx-st-warn-seed) 12%, transparent);
	--mlx-st-warn-line:   color-mix(in srgb, var(--mlx-st-warn-seed) 45%, transparent);
	--mlx-st-danger-ink:  color-mix(in srgb, var(--mlx-st-danger-seed) 70%, var(--mls-ink, #17181c) 30%);
	--mlx-st-danger-tint: color-mix(in srgb, var(--mlx-st-danger-seed) 12%, transparent);
	--mlx-st-danger-line: color-mix(in srgb, var(--mlx-st-danger-seed) 45%, transparent);
	--mlx-st-info-ink:    color-mix(in srgb, var(--mlx-st-info-seed) 70%, var(--mls-ink, #17181c) 30%);
	--mlx-st-info-tint:   color-mix(in srgb, var(--mlx-st-info-seed) 12%, transparent);
	--mlx-st-info-line:   color-mix(in srgb, var(--mlx-st-info-seed) 45%, transparent);
	--mlx-st-live-ink:    color-mix(in srgb, var(--mlx-st-live-seed) 70%, var(--mls-ink, #17181c) 30%);
	--mlx-st-live-tint:   color-mix(in srgb, var(--mlx-st-live-seed) 12%, transparent);
	--mlx-st-live-line:   color-mix(in srgb, var(--mlx-st-live-seed) 45%, transparent);

	/* ---- Skeletons (contrast-pulse: ink-mix is "brighter than base" in both
	   modes, so one definition serves light and dark) ---- */
	--mlx-skel:        color-mix(in srgb, var(--mls-ink, #17181c) 7%, transparent);
	--mlx-skel-sheen:  color-mix(in srgb, var(--mls-ink, #17181c) 14%, transparent);

	/* ---- Geometry ---- */
	--mlx-r-sm: 10px;  --mlx-r-md: 14px;  --mlx-r-lg: 18px;  --mlx-r-xl: 26px;  --mlx-r-pill: 999px;
	--mlx-sp-1: 4px;  --mlx-sp-2: 8px;  --mlx-sp-3: 14px;  --mlx-sp-4: 20px;  --mlx-sp-5: 28px;  --mlx-sp-6: 40px;
	--mlx-blur: 18px;  --mlx-blur-scrim: 10px;

	/* ---- Motion ---- */
	--mlx-dur-1: 120ms;  --mlx-dur-2: 220ms;  --mlx-dur-3: 420ms;
	--mlx-ease-out:    cubic-bezier(.22,.61,.21,1);
	--mlx-ease-spring: cubic-bezier(.34,1.4,.44,1);
	--mlx-ease-sheet:  cubic-bezier(.32,.72,.32,1);

	/* ---- Typography scale (consumed progressively; rem-based; hierarchy is
	   size/weight/tracking only — the family always flows from --mls-font) ---- */
	--mlx-fs-display: clamp(1.85rem, 1.35rem + 1.5vw, 2.5rem);
	--mlx-fs-h1: 1.5rem;  --mlx-fs-h2: 1.17rem;  --mlx-fs-h3: 1rem;
	--mlx-fs-body: 0.95rem;  --mlx-fs-sm: 0.85rem;  --mlx-fs-caption: 0.75rem;
	--mlx-fs-label: 0.72rem;  --mlx-fs-eyebrow: 0.7rem;  --mlx-fs-num-lg: 2.4rem;

	/* ---- Elevation shadows. The ink-derived --mlx-ring is BAKED IN as layer 1:
	   in light mode it reads as the crisp shadow edge; in dark mode (where black
	   shadows vanish) it brightens into a hairline — the classic shadows→rings
	   dark-mode shift with zero per-mode duplication. ---- */
	--mlx-shadow-1: 0 0 0 1px var(--mlx-ring), 0 1px 2px rgba(9,12,24,.08), 0 4px 14px rgba(9,12,24,.07);
	--mlx-shadow-2: 0 0 0 1px var(--mlx-ring), 0 2px 6px rgba(9,12,24,.10), 0 14px 36px rgba(9,12,24,.14);
	--mlx-shadow-3: 0 0 0 1px var(--mlx-ring), 0 6px 16px rgba(6,9,20,.16), 0 28px 70px var(--mlx-shadow-amp), 0 80px 200px var(--mlx-shadow-amp);

	/* ---- The 3 mode-structural tokens — the only place a single color-mix
	   can't express both modes. Static both-modes-safe value first; light-dark()
	   refinement second (needs the color-scheme declaration theme_css_vars()
	   now emits — older browsers simply keep the static value). ---- */
	--mlx-scrim: rgba(9,14,26,.55);
	--mlx-scrim: light-dark(rgba(13,21,40,.48), rgba(0,0,0,.62));
	--mlx-shadow-amp: rgba(6,9,20,.26);
	--mlx-shadow-amp: light-dark(rgba(6,9,20,.26), rgba(0,0,0,.55));
	--mlx-glass-hilite: rgba(255,255,255,.09);
	--mlx-glass-hilite: light-dark(rgba(255,255,255,.55), rgba(255,255,255,.07));
}

/* ============================================================ utilities
   Globally-defined (the mlx- prefix is collision-proof) so component files can
   use them without specificity games. All colors flow from the tier above via
   inheritance — these classes only ever appear inside the tokened wrappers. */

/* Tabular numerals for prices, countdowns, KPIs, IDs — the "mono-numeric"
   treatment without shipping a mono font. */
.mlx-num { font-variant-numeric: tabular-nums lining-nums; }

/* ---- Canonical status pill ---- */
.mlx-pill {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
	border-radius: var(--mlx-r-pill); font-size: var(--mlx-fs-caption); font-weight: 700; letter-spacing: .03em;
	background: var(--mlx-well); border: 1px solid var(--mlx-line-soft); color: var(--mlx-ink-lo);
}
.mlx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.mlx-pill--ok     { background: var(--mlx-st-ok-tint);     border-color: var(--mlx-st-ok-line);     color: var(--mlx-st-ok-ink); }
.mlx-pill--ok::before     { background: var(--mlx-st-ok-seed); }
.mlx-pill--warn   { background: var(--mlx-st-warn-tint);   border-color: var(--mlx-st-warn-line);   color: var(--mlx-st-warn-ink); }
.mlx-pill--warn::before   { background: var(--mlx-st-warn-seed); }
.mlx-pill--danger { background: var(--mlx-st-danger-tint); border-color: var(--mlx-st-danger-line); color: var(--mlx-st-danger-ink); }
.mlx-pill--danger::before { background: var(--mlx-st-danger-seed); }
.mlx-pill--info   { background: var(--mlx-st-info-tint);   border-color: var(--mlx-st-info-line);   color: var(--mlx-st-info-ink); }
.mlx-pill--info::before   { background: var(--mlx-st-info-seed); }
.mlx-pill--live   { background: var(--mlx-st-live-tint);   border-color: var(--mlx-st-live-line);   color: var(--mlx-st-live-ink); }
.mlx-pill--live::before   { background: var(--mlx-st-live-seed); }

/* ---- Skeleton loading primitives (replace plain "Loading…" text) ---- */
.mlx-skel { position: relative; overflow: hidden; border-radius: var(--mlx-r-sm); background: var(--mlx-skel); }
.mlx-skel::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, transparent 30%, var(--mlx-skel-sheen) 50%, transparent 70%);
	transform: translateX(-100%); animation: mlxShimmer 1.4s linear infinite;
}
.mlx-skel--line  { height: .9em; }
.mlx-skel--title { height: 1.4em; width: 38%; }
.mlx-skel--kpi   { height: 96px; border-radius: var(--mlx-r-md); }
.mlx-skel--row   { height: 72px; border-radius: var(--mlx-r-md); }
.mlx-skel--pill  { height: 22px; width: 74px; border-radius: var(--mlx-r-pill); }
@keyframes mlxShimmer { to { transform: translateX(100%); } }

/* ---- List entrance stagger (applied to a container by render fns) ---- */
.mlx-in > * { animation: mlxRise var(--mlx-dur-2) var(--mlx-ease-out) both; }
.mlx-in > :nth-child(2) { animation-delay: 30ms; }
.mlx-in > :nth-child(3) { animation-delay: 60ms; }
.mlx-in > :nth-child(4) { animation-delay: 90ms; }
.mlx-in > :nth-child(5) { animation-delay: 120ms; }
.mlx-in > :nth-child(6) { animation-delay: 150ms; }
.mlx-in > :nth-child(7) { animation-delay: 180ms; }
.mlx-in > :nth-child(n+8) { animation-delay: 210ms; }
@keyframes mlxRise { from { opacity: 0; transform: translateY(8px); } }

/* ---- Window-frame entry (consumed by the desktop floating window) ---- */
@keyframes mlxWinIn { from { opacity: 0; transform: translateY(16px) scale(.965); } }
@keyframes mlxScrim { from { opacity: 0; } }

/* ---- Reduced motion: everything in THIS file is nonessential motion.
   (Each surface file carries its own kill-switch for its own animations.) ---- */
@media (prefers-reduced-motion: reduce) {
	.mlx-skel::after { animation: none; }
	.mlx-in > * { animation: none; }
}