/* Staging = sage/gold (default theme.css). Production = warm copper accent. */

html[data-admin-env="production"] {
  --seal: #E8956A;
  --seal-2: #F5A882;
  --seal-tint: color-mix(in srgb, #E8956A 14%, transparent);
  --sage: #8BAF9E;
  --sage-2: #A8C9B8;
  --sage-tint: color-mix(in srgb, #8BAF9E 12%, transparent);
}

html[data-admin-env="staging"] .topbar {
  border-bottom-color: color-mix(in srgb, var(--sage-2) 28%, var(--ink-5));
}

html[data-admin-env="production"] .topbar {
  border-bottom-color: color-mix(in srgb, var(--seal) 38%, var(--ink-5));
}

html[data-admin-env="staging"] .env-badge.staging {
  color: var(--sage-2);
  border-color: color-mix(in srgb, var(--sage-2) 45%, transparent);
  background: var(--sage-tint);
}

html[data-admin-env="production"] .env-badge.production {
  color: var(--seal);
  border-color: color-mix(in srgb, var(--seal) 50%, transparent);
  background: var(--seal-tint);
}

html[data-admin-env="production"] .topbar .brand .ai {
  color: var(--seal);
}

html[data-admin-env="production"] .side button.on {
  box-shadow: inset 2px 0 0 var(--seal);
}

html[data-admin-env="production"] .bar-row .fil {
  background: linear-gradient(90deg, var(--sage), var(--seal));
}

html[data-admin-env="production"] .login-card .brand .ai {
  color: var(--seal);
}

html[data-admin-product="teaser"] .header-product-pill {
  color: var(--sage-2);
  border-color: color-mix(in srgb, var(--sage-2) 40%, var(--ink-5));
}

html[data-admin-product="thedentist"] .header-product-pill {
  color: var(--seal);
  border-color: color-mix(in srgb, var(--seal) 40%, var(--ink-5));
}

html[data-admin-product="teaser"] .login-product { color: var(--sage-2); }

html[data-admin-env="staging"] .site-panel-select {
  border-color: color-mix(in srgb, var(--sage-2) 35%, var(--ink-5));
}