/* ============================================================================
* eas-compat.css — v1.2.0
* Compatibility shim: maps the various CSS variable names used across EAS
* applicatives to the canonical EAS palette.
*
* USAGE
*
*
*
*
* Together, these two files redefine every variable an app might be reading
* (--bg-panel, --bg-card, --accent-dim, --green, --red, …) so that the app's
* existing HTML and CSS pick up EAS colors and typography WITHOUT requiring
* a markup rewrite.
*
* SCOPE
* - release-runner v2.x (--bg-panel, --bg-card, --bg-input, --bg-hover,
* --bg-active, --border-light, --text-bright,
* --text-dim, --text-muted, --green, --red,
* --yellow, --accent-dim, --accent-glow,
* --green-dim, --red-dim, --yellow-dim,
* --radius, --radius-lg, --mono, --sans,
* --nav-h, --safe-bottom)
* - api-console v2.x (--bg2, --panel, --panel2, --line, --muted,
* --dim, --accent2, --warn, --err, --ok,
* --info, --hl)
* - release-importer v1.x (--input-bg, --accent-hover, --success,
* --error)
* - eas-registry-platform (no vars — needs full migration)
*
* The aliases are ALL re-declared inside :root so they take effect even if
* the application stylesheet declares them again later: those redeclarations
* become harmless redundancies, since the values resolve identically.
* ========================================================================== */
:root {
/* ── Backgrounds ──────────────────────────────────────────────────────── */
/* Canonical: --eas-bg (deepest) / --eas-bg2 / --eas-panel / --eas-panel-2 */
--bg-panel: var(--eas-panel); /* RR: top bar, cards */
--bg-card: var(--eas-panel); /* RR: card / docker-action */
--bg-input: var(--eas-bg-2); /* RR: input bg, importer input */
--input-bg: var(--eas-bg-2); /* release-importer alias */
--bg-hover: var(--eas-panel-2); /* RR: card hover */
--bg-active: var(--eas-panel-2); /* RR: card pressed */
--panel: var(--eas-panel); /* api-console */
--panel2: var(--eas-panel-2); /* api-console */
--bg2: var(--eas-bg-2); /* api-console */
--surface: var(--eas-panel); /* generic alias */
/* ── Lines / borders ──────────────────────────────────────────────────── */
--border: var(--eas-line);
--border-light: var(--eas-line-soft);
--line: var(--eas-line);
/* ── Text ─────────────────────────────────────────────────────────────── */
--text-bright: var(--eas-text);
--text-dim: var(--eas-muted);
--text-muted: var(--eas-soft);
--muted: var(--eas-muted);
--dim: var(--eas-soft);
/* ── Accents ──────────────────────────────────────────────────────────── */
--accent-hover: var(--eas-accent-2); /* release-importer hover state */
--accent-dim: rgba(55, 213, 194, .14);
--accent-glow: rgba(55, 213, 194, .28);
--accent2: var(--eas-accent-2); /* api-console secondary accent */
--blue: var(--eas-accent-2); /* RR generic blue */
--cyan: var(--eas-accent); /* RR generic cyan */
/* ── Status semantic ──────────────────────────────────────────────────── */
--success: var(--eas-success);
--error: var(--eas-danger);
--ok: var(--eas-success);
--err: var(--eas-danger);
--warn: var(--eas-warning);
--info: var(--eas-info);
/* status as direct color names (RR convention) */
--green: var(--eas-success);
--red: var(--eas-danger);
--yellow: var(--eas-warning);
/* tinted backgrounds for status badges/buttons */
--green-dim: rgba(78, 197, 134, .14);
--red-dim: rgba(244, 102, 102, .14);
--yellow-dim: rgba(244, 191, 68, .14);
/* ── Highlight (api-console mark/code) ────────────────────────────────── */
--hl: var(--eas-warning);
/* ── Typography (compat names for the canonical font stacks) ──────────── */
--sans: var(--eas-font);
--mono: var(--eas-mono);
/* ── Radii ────────────────────────────────────────────────────────────── */
--radius: 10px; /* compact apps prefer 6-10px */
--radius-lg: 14px; /* RR: card radius */
/* ── App chrome metrics ───────────────────────────────────────────────── */
--nav-h: var(--eas-topbar); /* RR top bar height */
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* ─────────────────────────────────────────────────────────────────────────
* Compatibility classes that the apps already use but the framework only
* exposes under a slightly different name. Defining them here means the
* apps don't need to touch their markup.
* ───────────────────────────────────────────────────────────────────────── */
/* api-console: styling matches framework code-block automatically */
pre.log { background: var(--eas-bg); color: var(--eas-text); }
/* RR & release-importer: legacy badge variants seen in markup */
.badge.ok,
.badge-pass { background: var(--green-dim); color: var(--eas-success); border-color: rgba(78,197,134,.30); }
.badge.err,
.badge-fail { background: var(--red-dim); color: var(--eas-danger); border-color: rgba(244,102,102,.30); }
.badge.warn { background: var(--yellow-dim); color: var(--eas-warning); border-color: rgba(244,191,68,.30); }
.badge.pending { background: rgba(166,187,184,.10); color: var(--eas-muted); border-color: rgba(166,187,184,.20); }
/* api-console: ghost button compat */
button.ghost,
.btn.ghost { background: transparent; color: var(--eas-accent); border: 1px solid var(--eas-line); }
button.ghost:hover { border-color: var(--eas-accent); }
button.primary { background: var(--eas-accent); color: var(--eas-bg); border: 1px solid var(--eas-accent); }
/* RR: msg-* compat (already covered by alert-*) */
.msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; margin: 8px 0; border: 1px solid; }
.msg-error { background: var(--red-dim); color: var(--eas-danger); border-color: rgba(244,102,102,.30); }
.msg-success { background: var(--green-dim); color: var(--eas-success); border-color: rgba(78,197,134,.30); }
.msg-warn { background: var(--yellow-dim); color: var(--eas-warning); border-color: rgba(244,191,68,.30); }
.msg-info { background: rgba(120,168,255,.14); color: var(--eas-info); border-color: rgba(120,168,255,.30); }
/* api-console error block */
.error { color: var(--eas-danger); font-size: .9rem; padding: .6rem; background: rgba(244,102,102,.08); border-left: 3px solid var(--eas-danger); border-radius: 4px; }
.error:empty { display: none; }
/* RR sub-tabs visual alignment */
.sub-tabs { display: flex; gap: 1px; background: var(--eas-line); border-radius: 8px; overflow: hidden; }
.sub-tab { flex: 1; padding: 7px 8px; background: var(--eas-panel); border: 0; font-family: var(--eas-font); font-size: 12px; font-weight: 600; color: var(--eas-muted); cursor: pointer; text-align: center; }
.sub-tab.active { color: var(--eas-accent); background: var(--eas-panel-2); }
/* status-N (HTTP) — api-console */
.status-2xx { background: rgba(78,197,134,.16); color: var(--eas-success); border: 1px solid rgba(78,197,134,.40); padding: .3rem .7rem; border-radius: 6px; font-weight: 600; font-size: .85rem; font-family: var(--eas-mono); }
.status-3xx { background: rgba(55,213,194,.16); color: var(--eas-accent); border: 1px solid rgba(55,213,194,.40); padding: .3rem .7rem; border-radius: 6px; font-weight: 600; font-size: .85rem; font-family: var(--eas-mono); }
.status-4xx { background: rgba(244,191,68,.16); color: var(--eas-warning); border: 1px solid rgba(244,191,68,.40); padding: .3rem .7rem; border-radius: 6px; font-weight: 600; font-size: .85rem; font-family: var(--eas-mono); }
.status-5xx { background: rgba(244,102,102,.16); color: var(--eas-danger); border: 1px solid rgba(244,102,102,.40); padding: .3rem .7rem; border-radius: 6px; font-weight: 600; font-size: .85rem; font-family: var(--eas-mono); }
.status-0 { background: rgba(166,187,184,.10); color: var(--eas-muted); border: 1px solid rgba(166,187,184,.30); padding: .3rem .7rem; border-radius: 6px; font-weight: 600; font-size: .85rem; font-family: var(--eas-mono); }