/* Distinguishes the development environment from production. Only the page
   canvas token is replaced, so the portal surface keeps its own hue while the
   whole environment stays visibly dark. */
body {
  --app-page-background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 84% 10%, rgba(148, 163, 184, 0.18) 0, rgba(148, 163, 184, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.35) 0, rgba(15, 23, 42, 0) 34%),
    linear-gradient(180deg, #4b5563 0%, #374151 46%, #1f2937 100%);
}

/* Dark counterparts of the portal theme variants in style.css. Same darkness as
   the base above so the environment marker holds, different hue so the portal
   surface stays recognisable while the design is being chosen. */
body:has(.page-shell--portal-theme-1),
body.arseta-portal-theme-1 {
  --app-page-background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 84% 10%, rgba(45, 212, 191, 0.20) 0, rgba(45, 212, 191, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(6, 40, 38, 0.38) 0, rgba(6, 40, 38, 0) 34%),
    linear-gradient(180deg, #3f5f5c 0%, #2c4a48 46%, #17302f 100%);
}

body:has(.page-shell--portal-theme-2),
body.arseta-portal-theme-2 {
  --app-page-background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 84% 10%, rgba(245, 158, 11, 0.20) 0, rgba(245, 158, 11, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(45, 30, 12, 0.38) 0, rgba(45, 30, 12, 0) 34%),
    linear-gradient(180deg, #665849 0%, #4d4133 46%, #33291d 100%);
}

body:has(.page-shell--portal-theme-3),
body.arseta-portal-theme-3 {
  --app-page-background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 84% 10%, rgba(167, 139, 250, 0.20) 0, rgba(167, 139, 250, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(30, 22, 50, 0.38) 0, rgba(30, 22, 50, 0) 34%),
    linear-gradient(180deg, #565068 0%, #423c52 46%, #2a2437 100%);
}

body:has(.page-shell--portal-theme-4),
body.arseta-portal-theme-4 {
  --app-page-background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 84% 10%, rgba(96, 165, 250, 0.20) 0, rgba(96, 165, 250, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(12, 20, 48, 0.38) 0, rgba(12, 20, 48, 0) 34%),
    linear-gradient(180deg, #4b5473 0%, #363f5c 46%, #1f2740 100%);
}

body:has(.page-shell--portal-theme-5),
body.arseta-portal-theme-5 {
  --app-page-background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 84% 10%, rgba(56, 189, 248, 0.20) 0, rgba(56, 189, 248, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(8, 32, 46, 0.38) 0, rgba(8, 32, 46, 0) 34%),
    linear-gradient(180deg, #435a68 0%, #2f4451 46%, #1a2c37 100%);
}