html[data-theme="light"],
html:not([data-theme]){
  --crm-bg: var(--crm-light-bg);
  --crm-bg-2: var(--crm-light-bg-2);
  --crm-surface: var(--crm-light-surface);
  --crm-surface-2: var(--crm-light-surface-2);
  --crm-border: var(--crm-light-border);
  --crm-text: var(--crm-light-text);
  --crm-muted: var(--crm-light-muted);
  --crm-muted-2: var(--crm-light-muted-2);
  color-scheme: light;
}
html[data-theme="dark"]{
  --crm-bg: var(--crm-dark-bg);
  --crm-bg-2: var(--crm-dark-bg-2);
  --crm-surface: var(--crm-dark-surface);
  --crm-surface-2: var(--crm-dark-surface-2);
  --crm-border: var(--crm-dark-border);
  --crm-text: var(--crm-dark-text);
  --crm-muted: var(--crm-dark-muted);
  --crm-muted-2: var(--crm-dark-muted-2);
  color-scheme: dark;
}
html,
body{
  min-height: 100%;
}
body.crm-admin-page,
body.crm-report-page,
body.crm-auth-page,
body.crm-public-page,
body.crm-doc-page{
  min-height: 100vh;
  background-color: var(--crm-bg) !important;
  background-image:
    radial-gradient(1200px 520px at 0% 0%, color-mix(in srgb, var(--crm-accent) 9%, transparent), transparent 58%),
    radial-gradient(1000px 520px at 100% 0%, color-mix(in srgb, var(--crm-accent-2) 7%, transparent), transparent 55%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: top left, top right !important;
  background-size: 1200px 520px, 1000px 520px !important;
  color: var(--crm-text) !important;
}
body.crm-admin-page,
body.crm-report-page,
body.crm-auth-page,
body.crm-public-page,
body.crm-doc-page{
  --text: var(--crm-text) !important;
  --muted: var(--crm-muted) !important;
  --muted2: var(--crm-muted-2) !important;
  --border: var(--crm-border) !important;
  --border2: color-mix(in srgb, var(--crm-border) 85%, var(--crm-text) 15%) !important;
  --surface: var(--crm-surface) !important;
  --surface2: var(--crm-surface-2) !important;
  --surface3: color-mix(in srgb, var(--crm-surface) 84%, var(--crm-bg) 16%) !important;
  --btnBg: var(--crm-surface) !important;
  --btnBgHover: color-mix(in srgb, var(--crm-surface) 85%, var(--crm-accent) 15%) !important;
  --btnBorder: var(--crm-border) !important;
  --btnBorderHover: color-mix(in srgb, var(--crm-border) 65%, var(--crm-accent) 35%) !important;
  --tagBg: color-mix(in srgb, var(--crm-accent) 8%, var(--crm-surface) 92%) !important;
  --tagBorder: color-mix(in srgb, var(--crm-accent) 24%, var(--crm-border) 76%) !important;
  --tagText: var(--crm-text) !important;
  --shadow: var(--crm-shadow-md) !important;
  --shadow2: var(--crm-shadow-sm) !important;
  --focus: color-mix(in srgb, var(--crm-accent) 55%, transparent) !important;
}
html[data-theme="dark"] body.crm-admin-page,
html[data-theme="dark"] body.crm-report-page,
html[data-theme="dark"] body.crm-auth-page,
html[data-theme="dark"] body.crm-public-page,
html[data-theme="dark"] body.crm-doc-page{
  background-color: var(--crm-bg) !important;
  background-image:
    radial-gradient(1100px 520px at 0% 0%, rgba(47,108,246,.12), transparent 58%),
    radial-gradient(1000px 520px at 100% 0%, rgba(14,165,233,.08), transparent 55%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: top left, top right !important;
  background-size: 1100px 520px, 1000px 520px !important;
}