/* Shared theme contract for the portal, admin console, and tool pages. */
:root {
  --accent-rgb: 95, 124, 97;
  --status-ring: rgba(79, 157, 107, 0.14);
  --status-soft: rgba(79, 157, 107, 0.1);
}

:root[data-theme='violet'] {
  --bg: #f7f3f8;
  --surface: #ffffff;
  --surface-2: #eee8f0;
  --ink: #29242c;
  --ink-2: #5c5261;
  --muted: #756a79;
  --line: #e8e0ea;
  --line-strong: #d7cadc;
  --accent: #7a568f;
  --accent-deep: #513a60;
  --accent-soft: #eee4f2;
  --accent-faint: #f8f2fa;
  --accent-rgb: 122, 86, 143;
  --ok: #8a64a0;
  --success: #8a64a0;
  --status-ring: rgba(138, 100, 160, 0.16);
  --status-soft: rgba(138, 100, 160, 0.11);
  --shadow-sm: 0 1px 2px rgba(54, 39, 62, 0.05), 0 4px 12px rgba(54, 39, 62, 0.06);
  --shadow-md: 0 2px 6px rgba(54, 39, 62, 0.06), 0 16px 40px rgba(54, 39, 62, 0.11);
  --shadow-lg: 0 4px 10px rgba(54, 39, 62, 0.07), 0 30px 64px rgba(54, 39, 62, 0.17);

  --el-color-primary: #7a568f;
  --el-color-primary-light-3: #9c7bac;
  --el-color-primary-light-5: #b8a0c3;
  --el-color-primary-light-7: #d5c5dc;
  --el-color-primary-light-8: #e3d9e8;
  --el-color-primary-light-9: #f1ecf3;
  --el-color-primary-dark-2: #624573;
}

body {
  background-color: var(--bg, #f6f5f1);
  color: var(--ink, #24231f);
  transition: background-color 180ms ease, color 180ms ease;
}

:root[data-theme='violet'] body:not(.portal-home)::after {
  background-image: var(--portal-frame-desktop) !important;
  opacity: 0.52 !important;
}

.brand__mark {
  color: var(--accent, #5f7c61);
}

.brand__mark svg rect:first-child {
  fill: currentColor !important;
}

.brand__mark svg path,
.brand__mark svg circle {
  fill: var(--bg, #f6f5f1) !important;
}

.topbar,
.panel,
.card,
.tool-card,
button,
input,
textarea,
select {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: ease;
}

.status__dot,
.topbar__meta .status__dot {
  background: var(--ok, var(--success, #4f9d6b)) !important;
  box-shadow: 0 0 0 3px var(--status-ring) !important;
}

.tool-card__icon::after,
.tool-card__status::before {
  background: var(--ok, var(--success, #4f9d6b)) !important;
}

.tool-card__status,
.status-pill.is-online,
.badge--online {
  color: var(--ok, var(--success, #4f9d6b)) !important;
  background: var(--status-soft) !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused {
  border-color: var(--accent, #5f7c61) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18) !important;
}

:root[data-theme='violet'] .btn--primary,
:root[data-theme='violet'] .primary,
:root[data-theme='violet'] button[type='submit'],
:root[data-theme='violet'] .el-button--primary {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 18px rgba(81, 58, 96, 0.14);
}

@media (max-width: 560px) {
  :root[data-theme='violet'] body:not(.portal-home)::after {
    background-image: var(--portal-frame-mobile) !important;
    background-position: center -38px !important;
    opacity: 0.42 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .topbar,
  .panel,
  .card,
  .tool-card,
  button,
  input,
  textarea,
  select {
    transition: none !important;
  }
}