:root {
  --theme-primary: #157f67;
  --theme-secondary: #0f6955;
  --theme-accent: #276ef1;
  --theme-supporting: #38bdf8;

  --surface-page: #eef2f5;
  --surface-card: rgba(255, 255, 255, 0.90);
  --surface-border: rgba(148, 163, 184, 0.20);
}

.app-header-atmosphere {
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--theme-primary) 82%, white) 0%,
      color-mix(in srgb, var(--theme-secondary) 76%, white) 38%,
      color-mix(in srgb, var(--theme-accent) 70%, white) 68%,
      color-mix(in srgb, var(--theme-supporting) 68%, white) 100%
    ) !important;
}

header.topbar.app-header-atmosphere {
  backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

header.topbar.app-header-atmosphere .page-caption,
header.topbar.app-header-atmosphere .muted {
  color: rgba(255, 255, 255, 0.85);
}

.page-atmosphere {
  min-height: 100%;
  background:
    radial-gradient(
      720px 380px at 16% -40px,
      color-mix(in srgb, var(--theme-primary) 16%, transparent),
      transparent 72%
    ),
    radial-gradient(
      560px 320px at 43% 0,
      color-mix(in srgb, var(--theme-secondary) 12%, transparent),
      transparent 72%
    ),
    radial-gradient(
      660px 360px at 67% -30px,
      color-mix(in srgb, var(--theme-accent) 13%, transparent),
      transparent 72%
    ),
    radial-gradient(
      580px 340px at 85% -10px,
      color-mix(in srgb, var(--theme-supporting) 10%, transparent),
      transparent 72%
    ),
    var(--surface-page);
}

.data-surface {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 24px rgba(15, 23, 42, 0.035);
}