/* ArealLyn Theme Tuning V1.0.0 */
:root {
  --tuning-intensity: 1.12;
  --tuning-contrast: 1.04;
  --tuning-glass: .88;
  --glass-surface-alpha: .896;
  --glass-strong-alpha: .947;
  --glass-soft-alpha: .831;
  --glass-topbar-alpha: .888;
  --glass-card-alpha: .857;
  --tone-1: #36ddff;
  --tone-2: #7b8fff;
  --tone-3: #c16fff;
  --tone-4: #ff72b5;
  --tone-signal: #39ff91;
  --tone-gradient:
    linear-gradient(118deg, var(--tone-1), var(--tone-2) 34%, var(--tone-3) 67%, var(--tone-4));
}

html[data-tone="cyan"] {
  --tone-1: #22e6ff;
  --tone-2: #3aa7ff;
  --tone-3: #657dff;
  --tone-4: #61d7ff;
  --tone-signal: #36f3ff;
}

html[data-tone="violet"] {
  --tone-1: #8477ff;
  --tone-2: #ad6fff;
  --tone-3: #dc68ff;
  --tone-4: #ff70ae;
  --tone-signal: #ff67e7;
}

html[data-tone="emerald"] {
  --tone-1: #20e9d0;
  --tone-2: #32e69b;
  --tone-3: #51cfff;
  --tone-4: #7ef0c3;
  --tone-signal: #3dff9b;
}

html[data-tone="neutral"] {
  --tone-1: #a8b4c5;
  --tone-2: #7f90aa;
  --tone-3: #b5a8c9;
  --tone-4: #d1b4c1;
  --tone-signal: #b8c7dc;
}

html[data-resolved-theme="dark"] {
  color-scheme: dark;
  --page: #070a11;
  --surface: rgba(15, 21, 32, var(--glass-surface-alpha));
  --surface-strong: rgba(18, 26, 40, var(--glass-strong-alpha));
  --surface-soft: rgba(28, 38, 57, var(--glass-soft-alpha));
  --line: rgba(145, 168, 202, .22);
  --text: #f5f8fc;
  --muted: #9daabd;
  --panel-solid: #101826;
  --field-solid: #0d1623;
  --topbar-solid: rgba(10, 15, 24, var(--glass-topbar-alpha));
}

html[data-resolved-theme="light"] {
  color-scheme: light;
  --page: #eef3f9;
  --surface: rgba(255, 255, 255, var(--glass-surface-alpha));
  --surface-strong: rgba(247, 250, 255, var(--glass-strong-alpha));
  --surface-soft: rgba(224, 233, 245, var(--glass-soft-alpha));
  --line: rgba(58, 76, 101, .21);
  --text: #172235;
  --muted: #5d6c81;
  --panel-solid: #f6f9fd;
  --field-solid: #ffffff;
  --topbar-solid: rgba(248, 251, 255, var(--glass-topbar-alpha));
  --green: #058b55;
  --red: #c7364d;
  --amber: #a96500;
}

.background-layer,
.brand-logo-image,
.activity-dot,
.animated-flow-line,
.flow-connection-dot,
.theme-preview-gradient {
  filter:
    saturate(var(--tuning-intensity))
    contrast(var(--tuning-contrast));
}

.background-layer::after {
  background:
    radial-gradient(circle at 68% 12%, color-mix(in srgb, var(--tone-2) 24%, transparent), transparent 34%),
    radial-gradient(circle at 22% 76%, color-mix(in srgb, var(--tone-4) 17%, transparent), transparent 38%),
    rgba(5, 8, 14, var(--bg-overlay));
}

html[data-resolved-theme="light"] .background-layer::after {
  background:
    radial-gradient(circle at 68% 12%, color-mix(in srgb, var(--tone-2) 17%, transparent), transparent 34%),
    radial-gradient(circle at 22% 76%, color-mix(in srgb, var(--tone-4) 12%, transparent), transparent 38%),
    rgba(236, 242, 249, var(--bg-overlay));
}

.wordmark .areal,
.wordmark .lyn,
.wordmark .ai {
  background: var(--tone-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.profile-avatar,
.primary-button,
.static-login-submit {
  background: var(--tone-gradient);
}

.admin-rail,
.rail-footer,
.topbar,
.workspace-card,
.settings-group,
.panel-card,
.list-item,
.sql-console,
.sql-connections,
.flow-map-scroll,
.composer,
.dialog-card,
.model-table-row,
.installed-plugin-card {
  backdrop-filter: blur(20px);
}

html[data-resolved-theme="light"] .admin-rail,
html[data-resolved-theme="light"] .topbar {
  background: var(--topbar-solid);
}

html[data-resolved-theme="light"] .chat-shell {
  background: rgba(235, 241, 248, .35);
}

html[data-resolved-theme="light"] .workspace-card,
html[data-resolved-theme="light"] .settings-group,
html[data-resolved-theme="light"] .panel-card,
html[data-resolved-theme="light"] .list-item,
html[data-resolved-theme="light"] .sql-console,
html[data-resolved-theme="light"] .sql-connections,
html[data-resolved-theme="light"] .flow-map-scroll,
html[data-resolved-theme="light"] .composer,
html[data-resolved-theme="light"] .dialog-card,
html[data-resolved-theme="light"] .model-table-row,
html[data-resolved-theme="light"] .installed-plugin-card,
html[data-resolved-theme="light"] .status-indicator,
html[data-resolved-theme="light"] .icon-button,
html[data-resolved-theme="light"] .subtle-button {
  background-color: rgba(255, 255, 255, var(--glass-card-alpha));
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 10px 34px rgba(49, 67, 92, .08);
}

html[data-resolved-theme="light"] input,
html[data-resolved-theme="light"] textarea,
html[data-resolved-theme="light"] select,
html[data-resolved-theme="light"] .form-field,
html[data-resolved-theme="light"] .form-textarea,
html[data-resolved-theme="light"] .sql-editor,
html[data-resolved-theme="light"] .search-field {
  background: var(--field-solid);
  color: var(--text);
  border-color: var(--line);
}

html[data-resolved-theme="light"] code,
html[data-resolved-theme="light"] pre {
  color: #263a55;
}

html[data-resolved-theme="light"] .arealyn-static-login-gate {
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tone-1) 15%, transparent), transparent 36%),
    radial-gradient(circle at 62% 68%, color-mix(in srgb, var(--tone-3) 11%, transparent), transparent 40%),
    #edf3fa;
}

html[data-resolved-theme="light"] .arealyn-static-login-card {
  background: rgba(255, 255, 255, .96);
  color: var(--text);
  border-color: color-mix(in srgb, var(--tone-1) 38%, var(--line));
  box-shadow: 0 25px 80px rgba(47, 66, 92, .18);
}

html[data-resolved-theme="light"] .static-login-user,
html[data-resolved-theme="light"] .static-password-row input {
  background: #f7faff;
  color: var(--text);
  border-color: var(--line);
}

.theme-tuning-version {
  color: var(--tone-signal);
  font-size: 7px;
  white-space: nowrap;
}

.theme-tuning-card {
  border-color: color-mix(in srgb, var(--tone-1) 40%, var(--line));
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--tone-2) 6%, transparent),
    0 0 22px color-mix(in srgb, var(--tone-3) 5%, transparent);
}

.theme-tuning-card > p {
  color: var(--muted);
}

.theme-tuning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.theme-tuning-control {
  display: grid;
  gap: 6px;
}

.theme-range-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.theme-range-label strong {
  color: var(--tone-1);
}

.theme-tuning-control input[type="range"] {
  width: 100%;
  accent-color: var(--tone-2);
}

.theme-tuning-preview {
  position: relative;
  min-height: 120px;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  padding: 14px;
}

.theme-preview-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--tone-1) 42%, transparent), transparent 31%),
    radial-gradient(circle at 79% 32%, color-mix(in srgb, var(--tone-3) 34%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--page) 88%, transparent), var(--page));
}

.theme-preview-panels {
  position: absolute;
  inset: 16px 16px auto auto;
  display: flex;
  gap: 6px;
}

.theme-preview-panels span {
  width: 28px;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--tone-1) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 90%, var(--tone-2));
}

.theme-tuning-preview strong,
.theme-tuning-preview small {
  position: relative;
  z-index: 1;
}

.theme-tuning-preview strong {
  font-size: 20px;
  background: var(--tone-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.theme-tuning-preview small {
  color: var(--muted);
}

#themeToggleButton {
  color: var(--tone-1);
  border-color: color-mix(in srgb, var(--tone-1) 34%, var(--line));
}

@media (max-width: 700px) {
  .theme-tuning-grid {
    grid-template-columns: 1fr;
  }
}