/* Shared SwimFlow UI theme layer. Diagram themes remain independent. */
:root {
  color-scheme: dark;
  --ui-text-strong: #f4f8ff;
  --ui-text: #c9d7ea;
  --ui-text-muted: #8fa3bd;
  --ui-text-subtle: #7186a3;
  --ui-link: #72b7ff;
  --ui-surface: #0d1018;
  --ui-surface-soft: #111520;
  --ui-surface-raised: #151a28;
  --ui-border: #27354a;

  --ui-btn-bg: #121824;
  --ui-btn-bg-hover: #1a2433;
  --ui-btn-border: #30415a;
  --ui-btn-text: #d8e5f5;
  --ui-btn-primary: #357ee8;
  --ui-btn-primary-hover: #4b8df0;
  --ui-btn-success-bg: #153c2f;
  --ui-btn-success-border: #2a8b68;
  --ui-btn-success-text: #8ee0bd;
  --ui-btn-warning-bg: #3a2f12;
  --ui-btn-warning-border: #9c7724;
  --ui-btn-warning-text: #f4d06f;
  --ui-btn-danger-bg: #3a1b20;
  --ui-btn-danger-border: #a94750;
  --ui-btn-danger-text: #ff9ca5;
  --ui-btn-active-bg: #24344d;
}

:root[data-ui-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fc;
  --bg2: #ffffff;
  --bg3: #eef3f9;
  --border: #d5dfeb;
  --border2: #c3d0df;
  --ac: #1d4ed8;
  --ac2: #6335b5;
  --or: #b94708;
  --gr: #08734f;
  --ye: #8a5a00;
  --re: #c6281c;
  --tx: #334155;
  --dim: #596b82;
  --br: #0b1220;
  --white: #ffffff;

  --p1: #ffffff;
  --p2: #f8fafc;
  --p3: #edf2f7;
  --b1: #d8e2ed;
  --b2: #c5d2e1;
  --b3: #afc0d3;
  --a2: #6335b5;
  --pk: #9d26bb;
  --dm: #596b82;

  --ui-text-strong: #0b1220;
  --ui-text: #29384d;
  --ui-text-muted: #52647b;
  --ui-text-subtle: #667991;
  --ui-link: #1d4ed8;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-surface-raised: #eef3f9;
  --ui-border: #cdd8e5;

  --ui-btn-bg: #ffffff;
  --ui-btn-bg-hover: #eef4ff;
  --ui-btn-border: #bccbdb;
  --ui-btn-text: #24364c;
  --ui-btn-primary: #245fc4;
  --ui-btn-primary-hover: #1e55b0;
  --ui-btn-success-bg: #eaf7f1;
  --ui-btn-success-border: #80c9ad;
  --ui-btn-success-text: #116347;
  --ui-btn-warning-bg: #fff7df;
  --ui-btn-warning-border: #d8b455;
  --ui-btn-warning-text: #74520a;
  --ui-btn-danger-bg: #fff0f1;
  --ui-btn-danger-border: #e2a0a6;
  --ui-btn-danger-text: #a52d36;
  --ui-btn-active-bg: #dfeaff;
}

:root:not([data-ui-theme="light"]) {
  --tx: var(--ui-text);
  --dim: var(--ui-text-muted);
  --dm: var(--ui-text-muted);
  --br: var(--ui-text-strong);
}

:root[data-ui-theme="light"] body {
  background:
    radial-gradient(circle at 10% -10%, rgba(37, 99, 235, 0.07), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(105, 65, 198, 0.05), transparent 38%),
    var(--bg) !important;
  color: var(--ui-text) !important;
}

body,
p,
li,
td,
th,
label,
input,
textarea,
select,
button {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.title,
.heading {
  color: var(--ui-text-strong, var(--br)) !important;
}

p,
li,
td,
label,
.description,
.copy,
.body-copy {
  color: var(--ui-text, var(--tx));
}

.muted,
.dim,
.sub,
.subtitle,
.meta,
.hint,
.help,
.note,
.caption,
.small,
.byMemo,
.pnone,
.status,
[class*="muted"],
[class*="hint"] {
  color: var(--ui-text-muted, var(--dim, var(--dm))) !important;
}

#top,
#topSupport,
#left,
#right,
.lpanel,
#propsDiv,
#lintDiv,
#palDiv,
#abar,
.seg,
.dropdown,
.menu,
.popover,
.modal,
dialog {
  --dm: var(--ui-text-muted);
}

#top :where(span, label, small),
#topSupport :where(span, label, small),
.lpanel :where(span, label, small),
#propsDiv :where(span, label, small),
#lintDiv :where(span, label, small) {
  color: inherit;
}

a:not(.btn) {
  color: var(--ui-link, var(--ac));
}

a:not(.btn):hover {
  filter: brightness(1.08);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

:root[data-ui-theme="light"] #top,
:root[data-ui-theme="light"] nav,
:root[data-ui-theme="light"] .nav,
:root[data-ui-theme="light"] header,
:root[data-ui-theme="light"] .header {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--border, var(--b1)) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
  color: var(--ui-text) !important;
}

:root[data-ui-theme="light"] #topSupport,
:root[data-ui-theme="light"] #top[data-tools-mode="auto"]:hover #topSupport,
:root[data-ui-theme="light"] #top[data-tools-mode="auto"]:focus-within #topSupport,
:root[data-ui-theme="light"] .dropdown,
:root[data-ui-theme="light"] .menu,
:root[data-ui-theme="light"] .popover,
:root[data-ui-theme="light"] .modal,
:root[data-ui-theme="light"] dialog {
  background: rgba(255, 255, 255, 0.985) !important;
  color: var(--ui-text) !important;
  border-color: var(--border, var(--b1)) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
}

:root[data-ui-theme="light"] .seg {
  background: #edf2f7 !important;
  color: var(--ui-text-muted) !important;
}

:root[data-ui-theme="light"] input,
:root[data-ui-theme="light"] textarea,
:root[data-ui-theme="light"] select,
:root[data-ui-theme="light"] .miniInput,
:root[data-ui-theme="light"] .modeSel {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: var(--border2, var(--b2)) !important;
  caret-color: var(--ac);
}

:root[data-ui-theme="light"] input::placeholder,
:root[data-ui-theme="light"] textarea::placeholder {
  color: #687b92 !important;
  opacity: 1;
}

:root:not([data-ui-theme="light"]) input::placeholder,
:root:not([data-ui-theme="light"]) textarea::placeholder {
  color: #8094ad !important;
  opacity: 1;
}

/* Unified button system: keep labels readable and colors inside the SwimFlow palette. */
.btn,
button:not(.ui-theme-toggle),
.btnSecondary,
.btnGhost,
.btnOutline {
  font-weight: 600;
  background: var(--ui-btn-bg) !important;
  color: var(--ui-btn-text) !important;
  border-color: var(--ui-btn-border) !important;
  box-shadow: none;
}

.btn:hover,
button:not(.ui-theme-toggle):hover,
.btnSecondary:hover,
.btnGhost:hover,
.btnOutline:hover {
  background: var(--ui-btn-bg-hover) !important;
  color: var(--ui-text-strong) !important;
  border-color: color-mix(in srgb, var(--ui-btn-border) 65%, var(--ac)) !important;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ac) 12%, transparent) !important;
}

.btn.ac,
button.ac,
.btnPrimary,
a.btnPrimary {
  background: var(--ui-btn-primary) !important;
  color: #ffffff !important;
  border-color: var(--ui-btn-primary) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.btn.ac:hover,
button.ac:hover,
.btnPrimary:hover,
a.btnPrimary:hover {
  background: var(--ui-btn-primary-hover) !important;
  color: #ffffff !important;
  border-color: var(--ui-btn-primary-hover) !important;
  filter: none !important;
}

.btn.gr,
button.gr {
  background: var(--ui-btn-success-bg) !important;
  color: var(--ui-btn-success-text) !important;
  border-color: var(--ui-btn-success-border) !important;
}

.btn.gr:hover,
button.gr:hover {
  background: color-mix(in srgb, var(--ui-btn-success-bg) 82%, var(--ui-btn-success-border)) !important;
  color: var(--ui-btn-success-text) !important;
  border-color: var(--ui-btn-success-border) !important;
}

.btn.ye,
button.ye {
  background: var(--ui-btn-warning-bg) !important;
  color: var(--ui-btn-warning-text) !important;
  border-color: var(--ui-btn-warning-border) !important;
}

.btn.ye:hover,
button.ye:hover {
  background: color-mix(in srgb, var(--ui-btn-warning-bg) 82%, var(--ui-btn-warning-border)) !important;
  color: var(--ui-btn-warning-text) !important;
  border-color: var(--ui-btn-warning-border) !important;
}

.btn.re,
button.re {
  background: var(--ui-btn-danger-bg) !important;
  color: var(--ui-btn-danger-text) !important;
  border-color: var(--ui-btn-danger-border) !important;
}

.btn.re:hover,
button.re:hover {
  background: color-mix(in srgb, var(--ui-btn-danger-bg) 82%, var(--ui-btn-danger-border)) !important;
  color: var(--ui-btn-danger-text) !important;
  border-color: var(--ui-btn-danger-border) !important;
}

.btn.on,
.seg .btn.on,
[aria-pressed="true"].btn,
[aria-selected="true"].btn {
  background: var(--ui-btn-active-bg) !important;
  color: var(--ui-text-strong) !important;
  border-color: color-mix(in srgb, var(--ui-btn-border) 55%, var(--ac)) !important;
}

.seg .btn:not(.on) {
  background: transparent !important;
  color: var(--ui-text-muted) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.seg .btn:not(.on):hover {
  background: color-mix(in srgb, var(--ui-btn-bg-hover) 84%, transparent) !important;
  color: var(--ui-text-strong) !important;
}

.btn.dm,
button.dm,
:disabled,
[aria-disabled="true"] {
  background: color-mix(in srgb, var(--ui-btn-bg) 82%, transparent) !important;
  color: var(--ui-text-muted) !important;
  border-color: color-mix(in srgb, var(--ui-btn-border) 70%, transparent) !important;
  opacity: 0.72 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

:root[data-ui-theme="light"] pre,
:root[data-ui-theme="light"] code,
:root[data-ui-theme="light"] .code,
:root[data-ui-theme="light"] .editor {
  color: #243247;
  border-color: var(--border, var(--b1));
}

pre,
code,
kbd,
samp,
.editor,
textarea {
  font-variant-ligatures: contextual;
}

:root[data-ui-theme="light"] table,
:root[data-ui-theme="light"] th,
:root[data-ui-theme="light"] td,
:root[data-ui-theme="light"] .card,
:root[data-ui-theme="light"] .panel,
:root[data-ui-theme="light"] .lpanel {
  border-color: var(--ui-border) !important;
}

:root[data-ui-theme="light"] th {
  color: var(--ui-text-strong) !important;
}

:root[data-ui-theme="light"] td {
  color: var(--ui-text) !important;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ac, #2563eb) !important;
  outline-offset: 2px;
}

:where(button, .btn, a) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, .btn) {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}

:where(button, .btn):active {
  transform: translateY(0) scale(0.98);
}

.ui-theme-toggle {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 99999;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--border2, var(--b2, #334155));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg2, var(--p1, #0d1018)) 94%, transparent);
  color: var(--ui-text-strong, var(--br, #e8f0ff));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 600 12px/1 "Inter", "JetBrains Mono", system-ui, sans-serif;
}

.ui-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--ac, #2563eb);
  box-shadow: 0 12px 34px rgba(37, 99, 235, 0.16);
}

.ui-theme-toggle__label {
  display: none;
}

@media (min-width: 860px) {
  .ui-theme-toggle__label { display: inline; }
}

@media (prefers-contrast: more) {
  :root[data-ui-theme="light"] {
    --ui-text: #172033;
    --ui-text-muted: #3e5067;
    --border: #b8c6d6;
    --border2: #a8b9cc;
    --ui-btn-border: #91a5bb;
  }

  :root:not([data-ui-theme="light"]) {
    --ui-text: #e0e9f5;
    --ui-text-muted: #a9bad0;
    --ui-border: #3a4a61;
    --ui-btn-border: #49617e;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}