/* Shared Enercape Developer skin styles for Translator dashboard and consoles. */

:root {
  color-scheme: light;
  --translator-bg: #F2F8FC;
  --translator-surface: #FFFFFF;
  --translator-surface-alt: #E6F3FB;
  --translator-accent: #0079BF;
  --translator-accent-strong: #005F9E;
  --translator-accent-soft: #D7ECF8;
  --translator-accent-active: #B9DFF2;
  --translator-ink: #172637;
  --translator-slate: #627487;
  --translator-border: #D5E2EA;
  --translator-border-soft: #E6F3FB;
  --translator-success: #1F8D62;
  --translator-success-soft: #E4F5EE;
  --translator-success-border: #9BD7BE;
  --translator-warning: #D8821D;
  --translator-warning-soft: #FFF3D7;
  --translator-warning-border: #F2C782;
  --translator-danger: #C95656;
  --translator-danger-soft: #FCE7E7;
  --translator-danger-border: #F2B8B8;
  --translator-shadow: 0 12px 34px rgba(0, 95, 158, 0.12);

  --bg: var(--translator-bg);
  --panel: var(--translator-surface);
  --surface: var(--translator-surface);
  --surface-alt: var(--translator-surface-alt);
  --line: var(--translator-border);
  --line-soft: var(--translator-border-soft);
  --border: var(--translator-border);
  --text: var(--translator-ink);
  --ink: var(--translator-ink);
  --muted: var(--translator-slate);
  --slate: var(--translator-slate);
  --accent: var(--translator-accent);
  --accent-soft: var(--translator-accent-soft);
  --accent-weak: var(--translator-accent-soft);
  --blue: var(--translator-accent-strong);
  --blue-strong: var(--translator-accent-strong);
  --blue-soft: var(--translator-accent-soft);
  --blue-active: var(--translator-accent-active);
  --success: var(--translator-success);
  --success-soft: var(--translator-success-soft);
  --warning: var(--translator-warning);
  --warn: var(--translator-warning);
  --danger: var(--translator-danger);
  --danger-soft: var(--translator-danger-soft);
  --shadow: var(--translator-shadow);
}

body {
  background: var(--translator-bg);
  color: var(--translator-ink);
}

header,
.drawer,
.frame-shell,
.toolbar,
.panel,
.tabs,
.modal-panel {
  border-color: var(--translator-border);
}

header,
.drawer,
.frame-shell,
.toolbar,
.panel,
.tabs,
.modal-panel,
.metric,
.table-shell,
.scroll {
  background: var(--translator-surface);
}

input,
select,
textarea,
button,
.control,
.tab-button,
.filter-button,
.drawer-button,
.link-button,
.small-button {
  border-color: var(--translator-border);
  color: var(--translator-ink);
}

button.primary,
.publish-button,
.drawer-button.primary,
.nav-button.active {
  border-color: var(--translator-accent);
}

button.primary,
.publish-button,
.drawer-button.primary {
  background: var(--translator-accent);
  color: #FFFFFF;
}

.tab-button[aria-pressed="true"],
.tabs button.active,
.nav-button.active {
  border-color: var(--translator-accent-active);
  background: var(--translator-accent-soft);
  color: var(--translator-accent-strong);
}

.brand-mark,
.nav-icon,
.icon-button:hover,
.link-button:hover {
  background: var(--translator-accent-soft);
  color: var(--translator-accent-strong);
}

.filter-button[aria-pressed="true"],
.badge.warn,
.price-button.price-partial {
  border-color: var(--translator-warning-border);
  background: var(--translator-warning-soft);
  color: var(--translator-warning);
}

.badge.good,
.status.registered,
.status.activated,
.price-button.price-complete {
  border-color: var(--translator-success-border);
  background: var(--translator-success-soft);
  color: var(--translator-success);
}

.badge.bad,
.status.revoked,
.status.suspended,
.status.expired,
.notice.error,
.error,
.price-button.price-missing,
button.danger {
  border-color: var(--translator-danger-border);
  background: var(--translator-danger-soft);
  color: var(--translator-danger);
}

.badge.info,
.status.free,
.status.issued,
.badge.accent,
.link-button {
  border-color: var(--translator-accent-active);
  background: var(--translator-accent-soft);
  color: var(--translator-accent-strong);
}

.stage-badge:hover,
.stage-badge:focus-visible,
.coverage-badge:hover,
.coverage-badge:focus-visible,
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  border-color: var(--translator-accent);
  box-shadow: 0 0 0 2px rgba(0, 121, 191, 0.16);
  outline: 2px solid transparent;
}

.subtle,
.muted,
.compact,
label,
.metric .label,
th,
.nav-subtitle,
.brand-subtitle,
.current p,
.drawer-foot,
.section-title {
  color: var(--translator-slate);
}

th,
.language-heading td {
  background: #FBFCFE;
}